他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)匿名用户不能发表回复！|3.2.3　Bootstrap栅格系统
本文所属图书&>&
本书由国内资深前端工程师撰写，是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法，详细讲解了Bootstrap的组件、插件和扩展技术，而且深度解析了Bootstrap的内核源代码&&
Blueprint（http://www.blueprintcss.org/）是个经典的960栅格，提供了完整的框架，栅格是它的一部分功能。
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 class=&row&&
&&&& &div class=&span3&&3&/div&
&&&& &div class=&span6&&6&/div&&
&&&& &div class=&span3&&3&/div&
这种用法非常类似于&table&标签。&div class=&row&&相当于&table&，&div class=&span3&&
和&div class=&span6&&分别相当于&&td cols='3'&&、&&td cols='6'&&。注意，由于默认是12列的栅格，所有.span*列所跨越的栅格数之和最多是12，或者等于其父容器的栅格数。
在默认情况下，其中栅格的类样式源代码如下：
[class*=&span&] {
&&&&& float:
&&&&& min-height: 1
&&&&& margin-left: 20
上面是个属性选择器。定义属性名为&class&的值包含子串&span&，也就是span1、span2、span3等。margin-left：20px定义了每列的左边距为20px，也就是图3-11中的间距20px。
栅格系统的容器样式如下：
&&&& margin-left: -20
&&&& *zoom: 1;
.row:before,
.row:after {
&&&& display:
&&&& line-height: 0;
&&&& content: &&;
.row:after {
&&&& clear:
.row用来定义栅格容器，可以看到其中并没有定义宽度（width），所以其宽度就由内部栅格的总列宽决定。margin-left: -20px定义容器的左边距为-20px，作用是抵销第1列前面的20px。然后，通过伪类选择器.row: before和.row: after在容器左右两侧各添加一个空表格，并定义表格内容为空，行高为0，以便兼容IE等非标准在解析栅格系统时出现的异常，同时通过.row：after{clear：both；}样式清除浮动环绕问题。
.span12 { width: 940 }
.span11 { width: 860 }
.span10 { width: 780 }
.span9 { width: 700 }
.span8 { width: 620 }
.span7 { width: 540 }
.span6 { width: 460 }
.span5 { width: 380 }
.span4 { width: 300 }
.span3 { width: 220 }
.span2 { width: 140 }
.span1 { width: 60 }
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: 980 }
.offset11 { margin-left: 900 }
.offset10 { margin-left: 820 }
.offset9 { margin-left: 740 }
.offset8 { margin-left: 660 }
.offset7 { margin-left: 580 }
.offset6 { margin-left: 500 }
.offset5 { margin-left: 420 }
.offset4 { margin-left: 340 }
.offset3 { margin-left: 260 }
.offset2 { margin-left: 180 }
.offset1 { margin-left: 100 }
.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: 60
@gridGutterWidth: 20
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *
(@gridColumns - 1));
例如，在下面的示例中，利用Bootstrap栅格系统设计一个固定宽度的三列版式，代码如下，演示效果如图3-14所示。
&!doctype html&
&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:
&&&& height:300
&body&&div class=&container&&
&div class=&hero-unit&&&/div&
&div class=&row&&
&&&& &div class=&span2&&&/div&
&&&& &div class=&span7&&&/div&
&&&& &div class=&span3&&&/div&
&footer&&/footer&
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。
文章下载读书}