Blueprint（http://www.blueprintcss.org/）是个经典的960栅格系统，提供了完整的CSS框架，栅格系统是它的一部分功能。
Bootstrap默认的栅格系统为12列，宽度为940px，比标准的960栅格系统少20像素，这是因为它少了一个外边距，一个外边距默认为20像素。因此，虽然宽度仅为940像素，但是网页实际宽度与960栅格系统相同。
Bootstrap的栅格系统有两种，一种是固定式的（Fix），一种是流式的（Fluid），也就是可适应宽度的。固定式栅格系统每列的宽度及列与列间的间距都是固定的，列宽为60px，列间距为20px，如图3-11所示。
在Bootstrap中，为栅格系统定义了2类样式。容器为.row，可在容器中加入合适数量的.span*列。在设计页面网格系统时，如果确定宽度为940像素，则应确保各列之和等于12。具体用法如下：
<div class="row">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
或者
<div class="row">
<div class="span3">3</div>
<div class="span6">6</div>
<div class="span3">3</div>
</div>
这种用法非常类似于<table>标签。<div class="row">相当于<table>，<div class="span3">
和<div class="span6">分别相当于"<td cols='3'>"、"<td cols='6'>"。注意，由于默认是12列的栅格，所有.span*列所跨越的栅格数之和最多是12，或者等于其父容器的栅格数。
在默认情况下，其中栅格的类样式源代码如下：
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
上面是个属性选择器。定义属性名为"class"的值包含子串"span"，也就是span1、span2、span3等。margin-left：20px定义了每列的左边距为20px，也就是图3-11中的间距20px。
栅格系统的容器样式如下：
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
.row用来定义栅格容器，可以看到其中并没有定义宽度（width），所以其宽度就由内部栅格的总列宽决定。margin-left: -20px定义容器的左边距为-20px，作用是抵销第1列前面的20px。然后，通过伪类选择器.row: before和.row: after在容器左右两侧各添加一个空表格，并定义表格内容为空，行高为0，以便兼容IE等非标准浏览器在解析栅格系统时出现的异常，同时通过.row：after{clear：both；}样式清除浮动环绕问题。
.span12 { width: 940px; }
.span11 { width: 860px; }
.span10 { width: 780px; }
.span9 { width: 700px; }
.span8 { width: 620px; }
.span7 { width: 540px; }
.span6 { width: 460px; }
.span5 { width: 380px; }
.span4 { width: 300px; }
.span3 { width: 220px; }
.span2 { width: 140px; }
.span1 { width: 60px; }
span1～span12很像表格元素<table>中<td>的cols，即合并多少列。span1就是合并1列，即不合并，span2就是合并2列，span3是合并3列，以此类推。那为什么span4的宽度是300px呢？
先看下span4样式，由于上面的属性选择器已经规定了span1～span12的左边距都是20px，可知span4自身有20px的左边距（margin-left: 20px）。因此对于上面图来说，span4的宽度就等于4个span1宽度减去20像素，于是可以总结出这样的公式：span N的宽度=N×60+（N-1）×20。
把列向右移动可使用.offset*类。每个类都给列的左边距增加了指定单位的列。例如，.offset2将.span3右移了2个列的宽度，如图3-13所示。
.offset*类样式的源代码如下：
.offset12 { margin-left: 980px; }
.offset11 { margin-left: 900px; }
.offset10 { margin-left: 820px; }
.offset9 { margin-left: 740px; }
.offset8 { margin-left: 660px; }
.offset7 { margin-left: 580px; }
.offset6 { margin-left: 500px; }
.offset5 { margin-left: 420px; }
.offset4 { margin-left: 340px; }
.offset3 { margin-left: 260px; }
.offset2 { margin-left: 180px; }
.offset1 { margin-left: 100px; }
.offset1即移动1列，.offset2移动2列。margin-left是如何得出来的呢？以.offset2移动2列为例，图3-13演示了从第2列偏移2列到第4列。未移动前第2列的margin-left为20px，移动后由于占了3个间距和2个列宽，最终的margin-left就是180px。
注意 Bootstrap栅格系统列宽和间距都是可以定制的，在variables.less文件中，可以通过下面几个变量进行定制。
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *
(@gridColumns - 1));
例如，在下面的示例中，利用Bootstrap栅格系统设计一个固定宽度的三列版式，代码如下，演示效果如图3-14所示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<style type="text/css">
.row div {
background-color:gray;
height:300px;
}
</style>
</head>
<body><div class="container">
<div class="hero-unit"></div>
<div class="row">
<div class="span2"></div>
<div class="span7"></div>
<div class="span3"></div>
</div>
<footer></footer>
</div>
</body>
</html>
