读书频道 > 网站 > 网页设计 > Bootstrap实战
3.2.3 Bootstrap栅格系统
2013-11-02 15:45:03     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

本书由国内资深前端工程师撰写,是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法,详细讲解了Bootstrap的组件、插件和扩展技术,而且深度解析了Bootstrap的内核源代码  立即去当当网订购

Blueprint(http://www.blueprintcss.org/)是个经典的960栅格系统,提供了完整的CSS框架,栅格系统是它的一部分功能。

Bootstrap默认的栅格系统为12列,宽度为940px,比标准的960栅格系统少20像素,这是因为它少了一个外边距,一个外边距默认为20像素。因此,虽然宽度仅为940像素,但是网页实际宽度与960栅格系统相同。

Bootstrap的栅格系统有两种,一种是固定式的(Fix),一种是流式的(Fluid),也就是可适应宽度的。固定式栅格系统每列的宽度及列与列间的间距都是固定的,列宽为60px,列间距为20px,如图3-11所示。

 

在Bootstrap中,为栅格系统定义了2类样式。容器为.row,可在容器中加入合适数量的.span*列。在设计页面网格系统时,如果确定宽度为940像素,则应确保各列之和等于12。具体用法如下:
<div class="row">
     <div class="span1">1</div>
     <div class="span1">1</div> 
     <div class="span1">1</div>
     <div class="span1">1</div>
     <div class="span1">1</div>
     <div class="span1">1</div> 
     <div class="span1">1</div>
     <div class="span1">1</div>   
     <div class="span1">1</div>
     <div class="span1">1</div> 
     <div class="span1">1</div>
     <div class="span1">1</div>  
</div>

或者
<div class="row">
     <div class="span3">3</div>
     <div class="span6">6</div> 
     <div class="span3">3</div>
</div>

这种用法非常类似于<table>标签。<div class="row">相当于<table>,<div class="span3">
和<div class="span6">分别相当于"<td cols='3'>"、"<td cols='6'>"。注意,由于默认是12列的栅格,所有.span*列所跨越的栅格数之和最多是12,或者等于其父容器的栅格数。

在默认情况下,其中栅格的类样式源代码如下:
[class*="span"] {
      float: left;
      min-height: 1px;
      margin-left: 20px;
}

上面是个属性选择器。定义属性名为"class"的值包含子串"span",也就是span1、span2、span3等。margin-left:20px定义了每列的左边距为20px,也就是图3-11中的间距20px。
栅格系统的容器样式如下:
.row {
     margin-left: -20px;
     *zoom: 1;
}
.row:before,
.row:after {
     display: table;
     line-height: 0;
     content: "";
}
.row:after {
     clear: both;
}

.row用来定义栅格容器,可以看到其中并没有定义宽度(width),所以其宽度就由内部栅格的总列宽决定。margin-left: -20px定义容器的左边距为-20px,作用是抵销第1列前面的20px。然后,通过伪类选择器.row: before和.row: after在容器左右两侧各添加一个空表格,并定义表格内容为空,行高为0,以便兼容IE等非标准浏览器在解析栅格系统时出现的异常,同时通过.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; }

span1~span12很像表格元素<table>中<td>的cols,即合并多少列。span1就是合并1列,即不合并,span2就是合并2列,span3是合并3列,以此类推。那为什么span4的宽度是300px呢?

 

先看下span4样式,由于上面的属性选择器已经规定了span1~span12的左边距都是20px,可知span4自身有20px的左边距(margin-left: 20px)。因此对于上面图来说,span4的宽度就等于4个span1宽度减去20像素,于是可以总结出这样的公式:span N的宽度=N×60+(N-1)×20。
把列向右移动可使用.offset*类。每个类都给列的左边距增加了指定单位的列。例如,.offset2将.span3右移了2个列的宽度,如图3-13所示。

.offset*类样式的源代码如下:


.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; }

.offset1即移动1列,.offset2移动2列。margin-left是如何得出来的呢?以.offset2移动2列为例,图3-13演示了从第2列偏移2列到第4列。未移动前第2列的margin-left为20px,移动后由于占了3个间距和2个列宽,最终的margin-left就是180px。

注意 Bootstrap栅格系统列宽和间距都是可以定制的,在variables.less文件中,可以通过下面几个变量进行定制。
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *
(@gridColumns - 1));

例如,在下面的示例中,利用Bootstrap栅格系统设计一个固定宽度的三列版式,代码如下,演示效果如图3-14所示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<style type="text/css">
.row div {
     background-color:gray;
     height:300px;
}
</style>
</head>
<body><div class="container">
<div class="hero-unit"></div>
<div class="row">
     <div class="span2"></div>
     <div class="span7"></div>
     <div class="span3"></div>
</div>
<footer></footer>
</div>
</body>
</html>

 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.2.2 解析960栅格系统
下一篇:3.2.4 响应式Bootstrap栅格系统
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站