Bootstrap栅格系统研究

上一篇文章中已经对网页的栅格系统做了大概的说明，有了这个铺垫在来看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