一、什么是栅格系统。

　　这里主要介绍的是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-width: @screen-sm-min) { ... } 6  7 /* 中等屏幕（桌面显示器，大于等于 992px） */ 8 @media (min-width: @screen-md-min) { ... } 9 10 /* 大屏幕（大桌面显示器，大于等于 1200px） */11 @media (min-width: @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.