Bootstrap学习系列（一）之栅格系统概述

一、什么是栅格系统。

　　这里主要介绍的是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) { ... }

　　栅格参数如下：

个人建议：一个页面column多于6个，使用lg布局，多于4个使用md,2个使用sm，2个以下使用xs.