一、什么是栅格系统。
这里主要介绍的是Bootstrap的所提供的一套响应式栅格系统，栅格系统故名思义就是把一个系统分成一个个栅格来进行布局，而Bootstrap把一些主流的屏幕或者视口，分成了一行最多12列（例如：col-md-1到col-md-12）来进行布局，bootstrap把整个页面分割成多个row与column,也就是栅格来进行布局，而我们只需要把相应的标签填充到栅格里。这样系统就会自适应的根据不同的屏幕尺寸来进行布局。
二、Bootstrap栅格系统的工作原理。
1）通过行row在水平方向进行布局，然后在row中分割多个column,一行中column最多拥有12个。
2）行row必需包含在一个容器中.container(固定宽度)或者.container-fluid（100%宽度），以便为其赋予合适的排列（aligment）和内补（padding）。
3）所有的内容标签都应该放置于column中，而column必需放置在row中（只有column可以作为row的直接子元素）。
4）类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
5）通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
6）负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
7）栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
8）如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
9）栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
三、分界点阀值。
Bootstarp一共有4种分界点阀值（xs,sm,ms,lg），在Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
1 /* 超小屏幕（手机，小于 768px） */ 2 /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */ 3 4 /* 小屏幕（平板，大于等于 768px） */ 5 @media (min- @screen-sm-min) { ... } 6 7 /* 中等屏幕（桌面显示器，大于等于 992px） */ 8 @media (min- @screen-md-min) { ... } 9 10 /* 大屏幕（大桌面显示器，大于等于 1200px） */ 11 @media (min- @screen-lg-min) { ... }
栅格参数如下：
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
个人建议：一个页面column多于6个，使用lg布局，多于4个使用md,2个使用sm，2个以下使用xs.