Bootstrap栅格系统研究
|
上一篇文章中已经对网页的栅格系统做了大概的说明，有了这个铺垫在来看Bootstrap的栅格系统就比较容易了。 Bootstrap的栅格系统为12列(最大列数)，形成一个940px宽的容器。 Bootstrap的栅格系统有俩种，一种是固定式的，一种是流式的(也就是可适应宽度的)。 1.固定式栅格 ? ?固定式栅格系统每列的宽度(width)及列与列间的间距(margin)都是固定的，列宽为60px，列间距为20px。如下图：
在Bootstrap中定义了俩个样式。容器为? 用法如下： 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列的栅格，所有? 源码的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.
.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。大家可以验证下。 偏移列 把列向右移动可使用?
源码如下： 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.
}
上图演示了从第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.
}
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 .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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
