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

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

一，定宽栅格的实现

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

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

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

注意其中还用了属性选择其来选择spanX，因此是不支持ie8一下的浏览器的。
#grid > .core和#grid - .fluid都是在mixin中定义的方法。

我们先看看core是如何实现的：

 

其中最大的亮点就是用递归模拟了循环，通过循环避免了重复写12次代码。

二，流式栅格的实现

流式栅格相比对定宽栅格，最大的区别就是：
1，定宽栅格直接使用了传入的参数，而流式栅格用传入的参数计算出百分比，最终使用百分比来做布局。
2，定宽栅格可以使用负margin row来布局，而流式栅格则不行，因为row的负margin应该和span的margin-left保持一致，而这两个使用百分比的话是无法保持一致宽度的，因为百分比计算的对象不一样。

比如在同样是如下参数：
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
定宽栅格中，每一列就是60px宽度，列间距就是20px
而在流式栅格中根据上述参数会计算出一个百分比来，实际使用的是这些百分比：
// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);


流式栅格的代码如下：

三，响应式布局

有了上面的#grid > .core和 #grid > .fluid函数，实现响应式就非常简单了。
首先variables中已经定义好了不同宽度的样式，前面已经讲过了。
然后在加上media query并调用 #grid就ok了:
比如 1200px宽屏就是这么定义的：