首先,读者需要分辨3个概念:
(1)Fix(固定式布局)
对于固定式布局而言,无论浏览器是放大还是缩小,内容位置都不会因受挤压而改变,而且整个布局居中。
(2)Fluid(流式布局)
流式布局要设置布局的最大宽度和最小宽度。如果浏览器的宽度大于布局的最大宽度,那么不管浏览器大小怎么调整,布局里面的内容位置都不受挤压改变。如果浏览器的宽度小于布局的最大宽度,大于最小宽度,那么布局里的内容位置会随着浏览器的大小调整而改变。如果浏览器的宽度小于布局的最小宽度,布局里的内容位置也不会改变。
(3)Responsive(响应式布局)
准确来说,没有响应式布局,只有响应式设计。当浏览器的宽度小于某个值时,整个页面呈现另外一种布局。注意,固定式布局和流式布局都包含响应式设计。
先看下面的示例:
<div class="container">
<div class="row">
<div class="span4"> span4</div>
<div class="span8"> span8</div>
</div>
<div class="row">
<div class="span4"> span4</div>
<div class="span6"> span6</div>
<div class="span2"> span2</div>
</div>
</div>
在上面结构中,<div class="container">就是上面所说的容器,其中包含两行栅格(<div class="row">)。
Bootstrap中规定固定容器的总宽度为940px,具体源码定义如下:
.container{
width: 940px;
}
定义这个容器在页面中居中显示,源码如下:
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
这里有个技巧,为了让<div>在各种浏览器下产生同样的居中效果,将margin-left和margin-right的值设置为auto,这是最简单的方式。*zoom这个CSS Hack是为了兼容IE6和IE7。
同时,使用了CSS伪元素选择器,在这个类里面清空了前后的内容,并且在后面清除浮动:
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
接着,使用span进行整页布局:无论是做几列的布局,一定要保证在一行内各个span的名字加起来正好是12,例如,span4+span8等于12,也可以是一个单独的span12,还可以是span6+span6或span4+span4+span4等。每行内的span加起来总和为12,这样就可以保证完整的页面布局。
提示 虽然容器的宽度为940px,每个span的宽度都是默认值,但在实际开发中用户可以适当重写。
Bootstrap采用的是12列布局格式,即在页面一行之内最多可以布置12列。当然在局部栏目中不会使用12列,通常侧栏使用2列或3列,最多不会超过4列,主栏可以使用6列、7列或8列。