开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情
一、Bootstrap 栅格系统的工作原理
1.行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment）和内补（padding）。
2.通过行（row）在水平方向创建一组列（column）。
3.自己内容应当放置于列（column）内，并且，只有列可以作为行（row）的直接子元素。
4.类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的mixin 也可以用来创建语义化布局。
5.通过为列设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为.row 元素设置负值 margin 从而抵消为.container 元素设置的 padding，也就间接为行（row）所包含的列（column）抵消掉了 padding。
6.栅格系统的列是通过指定 1 到 12 的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4 来创建。
7.如果一行（row）中包含了的列（column）大于 12，多余的列所在的元素将作为一个整体另起一行排列。
8.栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类。
使用 Bootstrap 响应式布局，首先需要在 head 中引入 meta 标签，添加 viewpirt 属性，content 中宽度等于设备宽度，initial-scale:页面首次被显示可见区域的缩放级别，取值 1 则页面按实际尺寸显示，无任何缩放；maximum-scale:允许用户缩放到的最小比例；user-scalable:用户是否可以手动缩放。
下面为使用 bootstrap 布局的页面（登录表单界面），针对的是手机超小屏幕（iphone5s）和 PC 屏幕（>=1200px)。col-xs-12:小屏幕占 12 列大小，col-lg-5：大屏幕占 5 列大小，collg-offset-3:大屏幕缩进 3 列大小。这是一个比较简单的实例，想要适应其他屏幕如平板可添加col-md-* 属性，大屏手机可添加 col-sm-*属性。具体的屏幕使用哪个属性，可参考上面图上的针对不同屏幕 Bootstrap 栅格系统的不同使用。
