Bootstrap栅格系统研究

Biegral 2018/10/30 8:09:48 1753

转自：http://doliangzhe3.iteye.com/blog/1852851 


注意：
本文以Bootstrap2.0为基础进行解说，所以文中提及的span* 在Bootstrap3.0已用col-*-* 代替了。 

上一篇文章中已经对网页的栅格系统做了大概的说明，有了这个铺垫在来看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)，其中的百分比的得来也是按照固定式中的原则算的。


本文转载:CSDN博客

阅读排行

分类

归档