BootStrap
BootStrap的简介
1. 什么是Bootstrap
由两个前端设计师开发的一个前端的框架（Html，css，js）
简化了程序员写css的代码
2. 为什么使用BootStrap，有什么特点
l 学习比较简单，有了Html，css和js就能学习
l 响应式布局，可以适应多种的设备
l 移动设备优先
BootStrap的使用
环境的安装
官网上下载包
要想使用bootStrap 必须加载jquery
bootStrap的基本模板
1. Html文档的类型定义
BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义（DTD）
2. 字符集的设置
<meta charset="utf-8">
3. 移动设备优先
<meta name="viewport" content="width=device-width,initial-scale=1">
4. 引入css和js文件
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="bootstrap/js/jquery-1.10.2.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>
Css全局样式
1.布局容器样式
l .container 固定宽度且具有响应式
l .container-fluid 自由宽度（100%）
<div class="container">
3. 样式：<h1>到<h6>、h1~h6
H1~H6 样式重写的，几乎做到了兼容性
3.文本样式
1. <b>:加粗
2. <strong>:加粗
3. <i>:斜体
4. <em>:斜体，HTML5新标记
5. <del>:删除线，HTML5新标记
6. <s>:删除线
4. 文本对齐样式
1、 .text-left 本左对齐
2、 .text-right 文本右对齐
3、 .text-center 文本居中对齐
4、 .text-justify 两端对其
5. 列表样式
1、 .list-unstyled 无符号
2、 .list-inline 行内样式
6. 表格样式
1、.table：表格全局样式（少量的padding和水平方向的分割线）。
2、.table-striped：有条纹的背景色行（隔行变色）
3、.table-boedered：点边框的表格
4、.table-hover：鼠标悬停效果（放上变色、离开恢复）
5、.table-condensed：紧凑的表格（单元格内不会减半）
6、行或单元格背景色：.active、.success、.info、.warning、.danger
.active 当前样式
.success
.info
.warning
.danger
注意只能给<tr><td>添加颜色
7、响应式表格
将.table元素包裹在.table-responsive元素内，即可创建响应式表格
当屏幕宽度小于你的表格的时候，表格会出现滚动条
当屏幕宽度大于你的表格的时候，表格的滚动条自然消失
7. 表单样式
1、.form-group 表单组样式：将<label>和表单元素包含其中，你可以获得更好的排列。
2、.form-control 表单元素：常用于<input>、<textarea>、<select>元素
alceholder属性：给<input>添加提示信息
3、.form-inline 内联表单样式（用于form元素）：可以使元素一行排列
4、.sr-only:用于隐藏元素
5、.radio-inline 可以使一组单选框排在同一行
6、.checkbox-inline 可以使一组复选框排在同一行
7、.checkbox 复选框样式
8、.radio 单选框样式
9、.disable 可以禁用单选框或者复选框的样式
10、.help-block 帮助信息（与上面间隔，字体颜色变浅）
CSS的全局样式----栅格系统
栅格系统介绍
BootStrap提供了一套响应式、移动设备优先的流式的栅格系统
BootStrap把一个容器或整个网页平均分成12列
BootStrap的栅格系统，由一个行(.row)和多个列组成
栅格系统通过行列的形式来创建网页的布局，把具体的数据放入列当中
注意：栅格系统必须放在.container和.container-fluid之中
栅格系统参数
Col-xs-* 超小屏幕
Col-sm-*小屏幕
Col-md-*中等屏幕
Col-lg-*大屏幕
栅格系统的简单应用
注意：列数超过12列会自动换行
列偏移
也就是指：一个栏向右偏移多少
.col-md-offset-*
.col-md-offset-2 //指定栏向右偏移2个列 思想就是加上了一个左外边距
列嵌套
在某个栏中再嵌套一个完整栅格系统
8. 按钮样式：
1、 可作为按钮使用的元素：<a> 、<input>、<button>
2、 .btn：按钮的全局样式 <input type=”button” class=”btn”>
3、 预定义样式：.btn-default、.btn-primary、.btn-info、.btn-waring、.btn-danger、.btn-link
4、 .active 按钮激活状态、.disabled 按钮禁用样式
5、 按钮尺寸：.btn-lg（大按钮）、.btn-sm（小按钮）、.btn-xs（超小按钮）
6、 .btn-block：将按钮拉伸到撑满整个父元素