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提供变量标志。