BootStrap框架简介
BootStrap 12栅格系统
BootStrap 12栅格系统的使用
列偏移
使用.col-md-offset-*类可以将列想右偏移，这些类实际是通过使用 * 选择器为当前元素增加了左侧边距。
列嵌套
在已存在的.col-md-元素内添加一个新的.row元素和一系列.col-md-元素。需要注意的是，被嵌套的行所包含的列的个数不能超过12。
列排序
使用.col-md-push-(向右移动)和.col-md-pull-(向左移动)类可以改变列的顺序。
响应式栅格
CSS全局样式
一：排版
1.标题
在BootStrap框架中，HTML的 h1 到 h6 所有元素均可使用，但区别在于重新为其定义了标准样式，即提供了.h1到.h6类，为内联属性的文本赋予标题的样式。
在标题内还可以包含small标签或赋予.small类的元素，用来标记副标题。
2.页面主题
BootStrap框架将全局font-size设置为14px，line-height设置为1.428倍（即20px），这些属性直接赋予body元素和所有的p元素，p元素还被设置了等于1/2行高（即10px）的底部外边距。
想让一段文字突出显示使用.lead样式
语法：
<p class="lead">...</p>
3.对齐方式
语法：
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
4.列表
1）内联列表
.list-inline可以将所有元素放置同一行。
<ul class="liist-inline">
<li>...</li>
...
</ul>
2）水平定义列表
.dl-horizontal可以让dl内的短语及其描述排在一行
<dl class="dl-horizontal">
<dt>水果</dt>
<dd>苹果、香蕉...</dd>
<dt>咖啡</dt>
<dd>速溶、拿铁...</dd>
</dl>
水果 苹果、香蕉...
咖啡 速溶、拿铁...
二：表单
1.基本
所有表单元素都包裹在.form-group中。
.form-control默认设置宽度属性为100%。
2.内联表单
.form-inline类可使其内容左对齐并表现为inline-block级别控件，使表单横排展示在一行。
3.水平排列的表单
.form-horizontal类联合使用BootStrap预置的栅格类，可以将文字和表单控件水平排列布局。
4.校验状态
.has-warning 警告
.has-error 错误
.has-success 成功
5.控件尺寸
.***-lg 尺寸最大
.***-sm 尺寸最小
三：按钮
1.预定义样式
btn btn-default 默认灰色
btn btn-primary 深蓝色
btn btn-success 成功-绿色
btn btn-info 一般信息-天蓝色
btn btn-warning 警告-黄色
btn btn-danger 危险-红色
btn btn-link 链接
2.按钮尺寸
btn-lg 大型按钮
btn-sm 小型按钮
btn-xs 超小型按钮
class="btn brn-default btn-*"
四：图片
1.响应式图片
.img-responsive实质是为图片设置max-width:100%;、height:auto;和display:block;属性，从而使图片在其父元素中更好地缩放。
2.图片形状
.img-rounded 图片带圆角
.img-circle 图片呈现圆形（图片必须为正方形，不然是椭圆）
.img-thumbnail 图片带边框