栅格系统
概念：
通过定义容器大小，平分12份，再调整内外边距，最后再结合媒体查询，就能制作出强大的响应式的栅格系统。
原理:
一行数据（row）必须包含在.container 类中。
使用行（row）在水平方向创建一组列（column）。
具体的内容放置于列内，而且只有列才是行的直接子元素。
使用行样式和列样式对内容进行展示。
基本用法:
1 . 列组合
col-md-* : 列组合，* 代表了1-12 个列的值。md 表示中型屏幕。
规则：每个列都是左浮动，并且设置了每个列的宽度百分比。
2. 列偏移
col-md-offset-* : * 代表了1-12 个列的值。
规则： 源码中定义了每个列的margin-left的百分比。
3. 列嵌套
在一个列中，也可以声明一行或者多行（row）。
但是内部所嵌套的row的宽度为100%时，就是外部列的宽度。
4. 列排序
列排序就是改变列的方向，也就是改变左右浮动，并且设置浮动的距离。
col-md-push-* ： 向右移动需要使用推（push）。
col-md-pull-* ： 向左移动需要使用拉（pull）。
响应式栅格
4种不同的屏幕尺寸：
超小（xs）分辨率小于768px， 手机
小型（sm）分辨率 768px<=dpi < 992px， pad
中型（md）分辨率 992px <= dpi < 1200px ， pc小屏
大型（lg） 分辨率 大于 1200px。 pc大屏
媒体查询：
超小型默认实现
//sm
@media(min-width:768px){
.container { width: 750px; }
}
//中型
@media(min-width:992px){
.container { width : 970px ;}
}
//大型
@media(min-width:1200) {
.container { width : 1170px ;}
}
跨设备组合定义
我们可以在一个元素上，组合使用不同类型的样式，以适配不同尺寸的屏幕。
demo ：
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-2">col-sm-6 和 col-md-4</div>
</div>
适配小型屏幕和中，大屏幕的div 。
清除浮动问题
使用 .clearfix cisible-xs 类，来清除浮动。
