Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器,对于简单的两列式布局,创建一个 .row
容器,并在容器中加入合适数量的 .span*
列即可。由于默认是12列的栅格,所有 .span*
列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
带有基本栅格的HTML代码
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
上面的代码展示了
.span4
和 .span8
两列,两列的和总共是12个栅格。
偏移列
把列向右移动可使用 .offset*
类。每个类都给列的左边距增加了指定单位的列。例如,.offset4
将 .span4
右移了4个列的宽度。
<div class="row">
<div class="span4">...</div>
<div class="span3 offset2">...</div>
</div>
Bootstrap的每个span*的外边距为20px,所以Bootstrap的940px = (12 * 60px) + (11 * 20px),因为12个span中有11个外边距,
每个span*的计算:(n * 60px) + (n - 1) * 20px,所以span1为60px,span2为140px,以此类推,因为n个span中有n-1个外边距,所以得出上述计算公式。
上述有12个span1,每个span1的宽度为60px,中间有11个外边距,可以验证上面的计算公式。
每个偏移的计算为:(60px + 20px) * n + 20px,所以offset1的外边距为100px,offset2的外边距为180px,以此类推。。
上图中,若想将span2偏移到span3所在的位置,可知原本span2左边的外边距20px + span的宽度60px + span2右边的外边距20px = offset1的margin-left: 100px; 如想将span2偏移offset2到span4的位置,可知offset2 = 20px + (60px + 20px) * 2 = 180px
Bootstrap实现栅格系统的CSS代码:
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
.span9 {
width: 700px;
}
.span8 {
width: 620px;
}
.span7 {
width: 540px;
}
.span6 {
width: 460px;
}
.span5 {
width: 380px;
}
.span4 {
width: 300px;
}
.span3 {
width: 220px;
}
.span2 {
width: 140px;
}
.span1 {
width: 60px;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.offset12 {
margin-left: 980px;
}
.offset11 {
margin-left: 900px;
}
.offset10 {
margin-left: 820px;
}
.offset9 {
margin-left: 740px;
}
.offset8 {
margin-left: 660px;
}
.offset7 {
margin-left: 580px;
}
.offset6 {
margin-left: 500px;
}
.offset5 {
margin-left: 420px;
}
.offset4 {
margin-left: 340px;
}
.offset3 {
margin-left: 260px;
}
.offset2 {
margin-left: 180px;
}
.offset1 {
margin-left: 100px;
}