Bootstrap栅格系统研究

上一篇文章中已经对网页的栅格系统做了大概的说明，有了这个铺垫在来看Bootstrap的栅格系统就比较容易了。

Bootstrap的栅格系统为12列(最大列数)，形成一个940px宽的容器。

Bootstrap的栅格系统有俩种，一种是固定式的，一种是流式的(也就是可适应宽度的)。

1.固定式栅格

   固定式栅格系统每列的宽度(width)及列与列间的间距(margin)都是固定的，列宽为60px，列间距为20px。如下图：

在Bootstrap中定义了俩个样式。容器为 .row ，可在容器中加入合适数量的 .span* 列。

用法如下：

view sourceprint?

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样式如下：

view sourceprint?

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。

view sourceprint?

1..row {

2.margin-left:-20px;

3.*zoom:1;

4.}

.row是定义栅格容器的，可以看到其中并没有定义宽度(width),所以其宽度就由内部栅格的总列宽决定。"margin-left:-20px" 定义容器的左边距负的20px(-20px)，作用是抵销第1列前面的20px，在上图中已经标出。

view sourceprint?

01..span12{

02.width:940px;

03.}

04. 

05..span11{

06.width:860px;

07.}

08. 

09..span10{

10.width:780px;

11.}

12. 

13..span9{

14.width:700px;

15.}

16. 

17..span8{

18.width:620px;

19.}

20. 

21..span7{

22.width:540px;

23.}

24. 

25..span6{

26.width:460px;

27.}

28. 

29..span5{

30.width:380px;

31.}

32. 

33..span4{

34.width:300px;

35.}

36. 

37..span3{

38.width:220px;

39.}

40. 

41..span2{

42.width:140px;

43.}

44. 

45..span1{

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个列的宽度。

源码如下：

view sourceprint?

01..offset12{

02.margin-left:980px;

03.}

04. 

05..offset11{

06.margin-left:900px;

07.}

08. 

09..offset10{

10.margin-left:820px;

11.}

12. 

13..offset9{

14.margin-left:740px;

15.}

16. 

17..offset8{

18.margin-left:660px;

19.}

20. 

21..offset7{

22.margin-left:580px;

23.}

24. 

25..offset6{

26.margin-left:500px;

27.}

28. 

29..offset5{

30.margin-left:420px;

31.}

32. 

33..offset4{

34.margin-left:340px;

35.}

36. 

37..offset3{

38.margin-left:260px;

39.}

40. 

41..offset2{

42.margin-left:180px;

43.}

44. 

45..offset1{

46.margin-left:100px;

47.}

.offset1即移动一列，.offset2移动俩列。margin-left是如何得出来的，以.offset1移动一列为例，如下图：

上图演示了从第2列偏移1列到第3列。未移动前第2列的margin-left为20px，移动后由于占了俩个间距和一个列宽，所以最终的margin-left就是100px。

2.流式栅格

流式也固定式栅格的区别就是，每列的宽度是按照百分比来瓜分外围包裹的宽度的，看下源码：

view sourceprint?

1..row-fluid {

2.width:100%;

3.*zoom:1;

4.}

定义容器的宽度完全填充包裹外围容器的宽度。

view sourceprint?

1..row-fluid [class*="span"]:first-child {

2.margin-left:0;

3.}

清空第一列前面的边距，与固定式中的margin-left:-20px效果是一样的

view sourceprint?

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很接近。  

view sourceprint?

01..row-fluid .span12{

02.width:100%;

03.*width:99.94680851063829%;

04.}

05. 

06..row-fluid .span11{

07.width:91.48936170212765%;

08.*width:91.43617021276594%;

09.}

10. 

11..row-fluid .span10{

12.width:82.97872340425532%;

13.*width:82.92553191489361%;

14.}

15. 

16..row-fluid .span9{

17.width:74.46808510638297%;

18.*width:74.41489361702126%;

19.}

20. 

21..row-fluid .span8{

22.width:65.95744680851064%;

23.*width:65.90425531914893%;

24.}

25. 

26..row-fluid .span7{

27.width:57.44680851063829%;

28.*width:57.39361702127659%;

29.}

30. 

31..row-fluid .span6{

32.width:48.93617021276595%;

33.*width:48.88297872340425%;

34.}

35. 

36..row-fluid .span5{

37.width:40.42553191489362%;

38.*width:40.37234042553192%;

39.}

40. 

41..row-fluid .span4{

42.width:31.914893617021278%;

43.*width:31.861702127659576%;

44.}

45. 

46..row-fluid .span3{

47.width:23.404255319148934%;

48.*width:23.351063829787233%;

49.}

50. 

51..row-fluid .span2{

52.width:14.893617021276595%;

53.*width:14.840425531914894%;

54.}

55. 

56..row-fluid .span1{

57.width:6.382978723404255%;

58.*width:6.329787234042553%;

59.}

上面的代码是设置列的宽度(width)，其中的百分比的得来也是按照固定式中的原则算的。

原文地址：http://www.see-source.com/blog/300000033/273