响应式前端框架Bootstrap系列（2）网格系统

网格系统，也叫栅格系统，是bs中最常用也是最核心的布局方式。大家知道，一个前端界面是由多个块级元素组建而成，而我们常用到的块级元素就是div，网格系统就是将一个div划为等分12列。为了使网格系统能支持不同的分辨率，网格的列定义也分为了4种类型，分别是.col-xs、.col-sm、.col-md、.col-lg，它们与分辨率宽度的对应关系如下：

超小设备手机（<768px）用.col-xs-表示
小型设备平板电脑（≥768px）用.col-sm-表示
中型设备台式电脑（≥992px）用.col-md-表示
大型设备台式电脑（≥1200px）用.col-lg-表示

举个例子，我们创建一个包含3列的div块级元素，列的比例为4:1:1，当屏幕宽度小于768px时，列比例变为1:1:1

<style>
	.col-div {
		background-color: #dedef8;
		box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
	}
</style>
		
<div class="container">
	<div class="row">
		<div class="col-xs-4 col-sm-8 col-div">
			<p>col-xs-4 col-sm-8</p>
		</div>
		<div class="col-xs-4 col-sm-2 col-div">
			<p>col-xs-4 col-sm-2</p>
		</div>
		<div class="col-xs-4 col-sm-2 col-div">
			<p>col-xs-4 col-sm-2</p>
		</div>
	</div>
</div>

效果图：分辨率大于或等于768px时，

分辨率小于768px时，

由例子可以看到，当屏幕宽度像素变化时，样式为row的块级div元素显示的内部布局也会自动变化，这就是网格系统的强大之处。注意一点， 当没有更大屏宽度像素的约定时，元素将自动继承较小的屏幕宽度像素的约定。如上例中并没有设置.col-md和.col-lg的约定，该元素自动继承.col-sm的约定。

（注）样式为row的块级div元素允许设置具体的宽度像素。

网格系统还有两个很常用的API，它们是列偏移和列排序功能。

偏列移是一个用于更专业的布局的有用功能，它可用来给列腾出更多的空间。网格系统的列布局类似于流式布局，一列挨着一列。当中间列隐藏时，其它列会按流式布局的方式自动补充上来。比如要实现当不需要中间列，但又不想其它列自动补充上来的效果，代码如下：

<style>
	.col-div {
		background-color: #dedef8;
		box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
	}
</style>
		
<div class="container">
	<div class="row">
		<div class="col-xs-8 col-div">
			<p>col-xs-8</p>
		</div>
		<div class="col-xs-2 col-sm-offset-2 col-div">
			<p>col-xs-2 col-sm-offset-2</p>
		</div>
	</div>
</div>

效果图：

列偏移通过添加样式.col-md-offset-*实现，它会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

列排序，就是把div看做成包含12个插槽的一横，push就是把列往后推，pull就是把列往前拉。如.col-md-pull-1就是把该列在原来插槽的位置上往前拉至前一个插槽。演示源码如下：

<style>
	.col-div {
		background-color: #dedef8;
		box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
	}
</style>
		
<div class="container">
	<div class="row">
		<p>
			排序前
		</p>
		<div class="col-md-1 col-div">col-md-1</div>
		<div class="col-md-2 col-div">col-md-2</div>
		<div class="col-md-9 col-div">col-md-9</div>
	</div>
	<br>
	<div class="row">
		<p>
			排序后
		</p>
		<div class="col-md-1 col-md-push-11 col-div">col-md-1</div>
		<div class="col-md-2 col-md-pull-1 col-div">col-md-2</div>
		<div class="col-md-9 col-md-pull-1 col-div">col-md-9</div>
	</div>
</div>

效果图：

.col-md-push-*和.col-md-pull-*，其中 * 范围也是从 1 到 11。