BootStrap 前端架构

http://v3.bootcss.com/css/#grid-example-basic

Bootstrap栅格系统的工作原理:

     1， .row   必须包含在 .container   （固定宽度）或 .container-fluid   （100%宽度） 中，以便为其赋予合适的排列（aligment）和内补（padding）。

     2， 使用“行（row）”在水平方向创建一组“列（column）”。

     3， 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。

     4， 类似Predefined grid classes like   .row   and   .col-xs-4   这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

     5， 通过设置 padding 从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的 margin 从而抵消掉padding的影响。

     6， 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。（也就是说，对于网页宽度，是平均分为12列的。）

通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。

	超小屏幕设备 手机 (<768px)	小屏幕设备 平板 (≥768px)	中等屏幕设备 桌面 (≥992px)	大屏幕设备 桌面 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，超过这些阈值将变为水平排列
.container宽度	None (自动)	750px	970px	1170px
class前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数	12
最大列宽	自动	60px	78px	95px
槽宽	30px (每列左右均有15px)
可嵌套	Yes
偏移（Offsets）	Yes
列排序	Yes

实践：

     （1），这个栅格系统是向下兼容的。也即是说md的水平宽度在

总结：

container和fluid container 

container在大屏幕上时两边有一定的margin

而fluid container没有这个margin，直接就是全屏幕的

设备宽度：

           超小屏幕设备  手机 (<768px)   .col-xs-

           小屏幕设备  平板 (≥768px)        .col-sm-

           中等屏幕设备  桌面 (≥992px)    .col-md-

           大屏幕设备  桌面 (≥1200px)       .col-lg-

 栅格宽度：

           col-md-*

设备缩放自定义：

      class = "col-xs-12 col-sm-6 col-md-8"

栅格偏移：

      .col-md-offset-*

     栅格是默认左对齐的！

栅格嵌套：

     只需要在col中增加row的div以及相应的col即可。

列排序：

      通过使用 .col-md-push-*  和  .col-md-pull-* 就可以很容易的改变列的顺序。

LESS mixin和变量：

     less可以让css提供变量标志。