Bootstrap精巧布局
转载地址:http://www.see-source.com/blog/300000033/280 Bootstrap提供俩种布局方式固定(网格)布局和流式(网格)布局。结合上篇文章所讨论的栅格系统来说,Bootstrap的布局实际上是在栅格外加个容器(container)。固定布局加的是固定宽度(width)的容器,流式布局加的是自适应(或叫可变)宽度的容器,这是二者的唯一区别。 1.固定布局 下面来看个示例:
01.
<body>??
02.
<div class= "container" >
03.
<div class= "row" >
04.
<div class= "span4" > span 4 </div>
05.
<div class= "span8" > span 8 </div>
06.
</div>
07.
<div class= "row" >
08.
<div class= "span4" > span 4 </div>
09.
<div class= "span6" > span 6 </div>
10.
<div class= "span2" > span 2 </div>
11.
</div>
12.
</div>
13.
</body>
<div class="container">就是上面所说的容器,其内有俩行栅格(.row)。 Bootstrap中规定固定容器的总的宽度为940px,具体看下源码定义,如下: 1.
.container,
2.
{
3.
width : 940px ;
4.
}
还有就是规定了这个container的页面居中,源码如下: 1.
.container {
2.
margin-left : auto ;
3.
margin-right : auto ;
4.
*zoom: 1 ;
5.
}
(这里有个技巧,为了让div在各种浏览器下下产生同样的居中效果将margin-left和margin-right的值为auto是最简单的方式。*zoom这个css hack是为了兼容ie6和7,但具体为什么要使用zoom=1还不得而知。) 同时,还使用了css伪元素选择器,在这个类里面还清空了前后的内容,并且在后面还清除了浮动: 01.
.container:before,
02.
.container:after {
03.
display : table;
04.
line-height : 0 ;
05.
content : "" ;
06.
}
07.
.container:after {
08.
clear : both ;
09.
}
接下来简单谈一下使用span进行整页布局的一个技巧:无论是做几列的布局,那么请一定保证在一个row内的各个span的名字加起来正好是12. 比如可以是前面说的span4+span8;也可以是一个单独的span12;也可以是span6+ span6;或者span4+ span4+ span4等等。 ?注:文字中谈的数字(比如container的宽度为940px,每个span的宽度都是缺省值,实际开发中我们可以适当重写。) 2.流式布局 也是先看个示例: 01.
<body>
02.
<div class= "container-fluid" >
03.
<div class= "row-fluid" >
04.
<div class= "span2" >...</div>
05.
<div class= "span10" >...</div>
06.
</div>
07.
<div class= "row-fluid" >
08.
<div class= "span2" >...</div>
09.
<div class= "span10" >...</div>
10.
</div>
11.
</div>
12.
</body>
源码如下:
1.
.container-fluid {
2.
padding-right : 20px ;
3.
padding-left : 20px ;
4.
*zoom: 1 ;
5.
}
01.
.container-fluid:before,
02.
.container-fluid:after {
03.
display : table;
04.
line-height : 0 ;
05.
content : "" ;
06.
}
07.
?
08.
.container-fluid:after {
09.
clear : both ;
10.
}
3.布局的嵌套 布局的嵌套实际就是栅格的嵌套。如下: 01.
<div class= "row" >
02.
<div class= "span12" >
03.
嵌套的顶级
04.
<div class= "row" >
05.
<div class= "span6" >嵌套的 2 级</div>
06.
<div class= "span6" >嵌套的 2 级</div>
07.
</div>
08.
</div>
09.
</div>
归结起来, Bootstrap的布局其实就是 容器 + 栅格系统,容器只是限制外围的宽度,主要变化在于栅格,通过栅格的合并、偏移、嵌套 来最终达到布局效果的。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |