bootstrap源码分析系列：二，栅格和响应式布局

bootstrap把response单独分开作为一个独立模块
这样整个栅格系统实际上分为了栅格grid和响应式布局response。非响应式的栅格是940固定宽度的，并且分为固定和流式两种，响应式布局就是通过media query增加了对不同屏幕宽度的适应。

布局上，通过容器的负padding-left和每一个列的margin-left来实现的，如下图所示：

一，定宽栅格的实现

在variables.less文件中定义了不同容器宽度下栅格系统的几个变量：列数（总是12列），列宽度columnWidth, 列间隙宽度gutterWidth和行宽度rowWidth。
代码如下：

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

这段代码定义了三种宽度下的显示方式，默认的940px宽度下，每一列宽度是60，列间隙是20，那么行宽度就是60x12+20x(12-1)=940px

在grid代码中直接调用了mixin中的grid方法：

<