Bootstrap框架一(栅格系统)

比较重点的部分：
http://v3.bootcss.com/css/#grid

1. Bootstrap 是移动设备优先的

2. .container类用于固定宽度并支持响应式布局的容器；
   .container-fluid类用于100%宽度，占据全部视图的容器

3. Bootstrap 栅格系统的工作原理：
   通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

4. 栅格参数：
   超小屏幕 手机 (<768px)
   小屏幕 平板 (≥768px)
   中等屏幕 桌面显示器 (≥992px)
   大屏幕 大桌面显示器 (≥1200px)

5. 实例：流式布局容器
   将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

6. 实例：从堆叠到水平排列（中等屏幕）
   使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>

7. 实例：移动设备xs和桌面屏幕md
   是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。

<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>

8.实例：手机xs、平板ms、桌面md
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

9.响应式列重置
即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix和 响应式工具类。

10. 具体布局

    1. container类
       定义一个固定宽度且居中的版心
       container是具备响应式的能力
       四个档位 1170 970 750 100%

    2. row类
       row类代表一行，一般都是与container类一起结合使用。
       并且在栅栏系统中，所有“列（column）必须放在 ” .row 内;

    3. 栅格系统
       所有“列（column）必须放在 ” .row 内; 并且.row一般放在.container内；
       Bootstrap中的栅格系统就是将一行划分为12列
       我们通过col--的类名控制某个元素在某种屏幕的情况下展示几列
       col-md-6 在中等屏幕下 占1/2
       col-xs-12 在超小屏幕下 占全部

    4. col--类
       在某种屏幕尺寸下控制列的占比
       col-xs-[列数]：在超小屏幕下展示几份
       col-sm-[列数]：在小屏幕下展示几份
       col-md-[列数]：在中等屏幕下展示几份
       col-lg-[列数]：在大屏幕下展示几份
       xs : 超小屏幕 手机 (<768px)
       sm : 小屏幕 平板 (≥768px)
       md : 中等屏幕 桌面显示器 (≥992px)
       lg : 大屏幕 大桌面显示器 (≥1200px)