上一篇文章中已经对网页的栅格系统做了大概的说明，有了这个铺垫在来看Bootstrap的栅格系统就比较容易了。
Bootstrap的栅格系统为12列(最大列数)，形成一个940px宽的容器。
Bootstrap的栅格系统有俩种，一种是固定式的，一种是流式的(也就是可适应宽度的)。
1.固定式栅格
固定式栅格系统每列的宽度(width)及列与列间的间距(margin)都是固定的，列宽为60px，列间距为20px。如下图：
在Bootstrap中定义了俩个样式。容器为 .row ，可在容器中加入合适数量的 .span* 列。
用法如下：
1.
<div class=
"row"
>
2.
<div class=
"span4"
>...</div>
3.
<div class=
"span8"
>...</div>
4.
</div>
用法非常类似<table> 标签。"<div class='row'>"相当于是<table>，"<div class='span4'>"、"<div class='span8'>" 相当于"<td cols='4'>"、"<td cols='8'>"。注意：由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
源码的css样式如下：
1.
[class*=
"span"
] {
2.
float
:
left
;
3.
min-height
:
1px
;
4.
margin-left
:
20px
;
5.
}
上面是个属性选择器。定义属性名为"class"的值包含子串"span",也就是span1、span2、span3....。"margin-left:20px"定义了每列的左边距为20px，也就是上图中的间距20px。
1.
.row {
2.
margin-left
:
-20px
;
3.
*zoom:
1
;
4.
}
.row是定义栅格容器的，可以看到其中并没有定义宽度(width),所以其宽度就由内部栅格的总列宽决定。"margin-left:-20px" 定义容器的左边距负的20px(-20px)，作用是抵销第1列前面的20px，在上图中已经标出。
01.
.span
12
{
02.
width
:
940px
;
03.
}
04.
05.
.span
11
{
06.
width
:
860px
;
07.
}
08.
09.
.span
10
{
10.
width
:
780px
;
11.
}
12.
13.
.span
9
{
14.
width
:
700px
;
15.
}
16.
17.
.span
8
{
18.
width
:
620px
;
19.
}
20.
21.
.span
7
{
22.
width
:
540px
;
23.
}
24.
25.
.span
6
{
26.
width
:
460px
;
27.
}
28.
29.
.span
5
{
30.
width
:
380px
;
31.
}
32.
33.
.span
4
{
34.
width
:
300px
;
35.
}
36.
37.
.span
3
{
38.
width
:
220px
;
39.
}
40.
41.
.span
2
{
42.
width
:
140px
;
43.
}
44.
45.
.span
1
{
46.
width
:
60px
;
47.
}
span1、span2...很像表格元素<table>中<td>的cols，即合并多少列。span1就是合并1列(即不合并)，span2就是合并2列，span3是合并3列...。那为什么span2的宽度是140px那，我们可以算下：
先看下span2。由于上面的属性选择器已经规定了span1、span2.....span12 的左边距都是20px，所以span2自身有20px的左边距(margin-left:20px),也就是上图中第3列与第4列的间距。所以对于上面图来说span2的宽度就是等于=第4列的宽度60px+第5列的宽度60px+第4列与第5列的间距20px =140px。span3的算法也是如此。 最后总结的公式就是spanN的宽度(width) = N*60 + (N-1)*20。大家可以验证下。
偏移列
把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。
源码如下：
01.
.offset
12
{
02.
margin-left
:
980px
;
03.
}
04.
05.
.offset
11
{
06.
margin-left
:
900px
;
07.
}
08.
09.
.offset
10
{
10.
margin-left
:
820px
;
11.
}
12.
13.
.offset
9
{
14.
margin-left
:
740px
;
15.
}
16.
17.
.offset
8
{
18.
margin-left
:
660px
;
19.
}
20.
21.
.offset
7
{
22.
margin-left
:
580px
;
23.
}
24.
25.
.offset
6
{
26.
margin-left
:
500px
;
27.
}
28.
29.
.offset
5
{
30.
margin-left
:
420px
;
31.
}
32.
33.
.offset
4
{
34.
margin-left
:
340px
;
35.
}
36.
37.
.offset
3
{
38.
margin-left
:
260px
;
39.
}
40.
41.
.offset
2
{
42.
margin-left
:
180px
;
43.
}
44.
45.
.offset
1
{
46.
margin-left
:
100px
;
47.
}
.offset1即移动一列，.offset2移动俩列。margin-left是如何得出来的，以.offset1移动一列为例，如下图：
上图演示了从第2列偏移1列到第3列。未移动前第2列的margin-left为20px，移动后由于占了俩个间距和一个列宽，所以最终的margin-left就是100px。
2.流式栅格
流式也固定式栅格的区别就是，每列的宽度是按照百分比来瓜分外围包裹的宽度的，看下源码：
1.
.row-fluid {
2.
width
:
100%
;
3.
*zoom:
1
;
4.
}
定义容器的宽度完全填充包裹外围容器的宽度。
1.
.row-fluid [class*=
"span"
]:first-child {
2.
margin-left
:
0
;
3.
}
清空第一列前面的边距，与固定式中的margin-left:-20px效果是一样的
01.
.row-fluid [class*=
"span"
] {
02.
display
:
block
;
03.
float
:
left
;
04.
width
:
100%
;
05.
min-height
:
30px
;
06.
margin-left
:
2.127659574468085%
;
07.
*
margin-left
:
2.074468085106383%
;
08.
-webkit-box-sizing: border-box;
09.
-moz-box-sizing: border-box;
10.
box-sizing: border-box;
11.
}
我们这里只关注与宽度有关的代码。上面代码中margin-left: 2.127659574468085% 以百分比设置列的左边距(margin-left),约等于2.12%,
我们以上面固定式中的940px 为例来算下大约是多少px。2.12% * 940 = 19.928 。 与20px很接近。
01.
.row-fluid .span
12
{
02.
width
:
100%
;
03.
*
width
:
99.94680851063829%
;
04.
}
05.
06.
.row-fluid .span
11
{
07.
width
:
91.48936170212765%
;
08.
*
width
:
91.43617021276594%
;
09.
}
10.
11.
.row-fluid .span
10
{
12.
width
:
82.97872340425532%
;
13.
*
width
:
82.92553191489361%
;
14.
}
15.
16.
.row-fluid .span
9
{
17.
width
:
74.46808510638297%
;
18.
*
width
:
74.41489361702126%
;
19.
}
20.
21.
.row-fluid .span
8
{
22.
width
:
65.95744680851064%
;
23.
*
width
:
65.90425531914893%
;
24.
}
25.
26.
.row-fluid .span
7
{
27.
width
:
57.44680851063829%
;
28.
*
width
:
57.39361702127659%
;
29.
}
30.
31.
.row-fluid .span
6
{
32.
width
:
48.93617021276595%
;
33.
*
width
:
48.88297872340425%
;
34.
}
35.
36.
.row-fluid .span
5
{
37.
width
:
40.42553191489362%
;
38.
*
width
:
40.37234042553192%
;
39.
}
40.
41.
.row-fluid .span
4
{
42.
width
:
31.914893617021278%
;
43.
*
width
:
31.861702127659576%
;
44.
}
45.
46.
.row-fluid .span
3
{
47.
width
:
23.404255319148934%
;
48.
*
width
:
23.351063829787233%
;
49.
}
50.
51.
.row-fluid .span
2
{
52.
width
:
14.893617021276595%
;
53.
*
width
:
14.840425531914894%
;
54.
}
55.
56.
.row-fluid .span
1
{
57.
width
:
6.382978723404255%
;
58.
*
width
:
6.329787234042553%
;
59.
}
上面的代码是设置列的宽度(width)，其中的百分比的得来也是按照固定式中的原则算的。
同步博客：http://www.see-source.com/blog/300000033/273