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)，其中的百分比的得来也是按照固定式中的原则算的。