本文转自Bootstrap官网。


在Bootstrap框架中，栅格系统是以媒体查询为基础的一种响应式系统。在栅格系统中，根据所占屏幕的大小，将屏幕模式分为四类：超小屏（xs）、小屏（sm）、中屏（md）、大屏（lg）。下面是我在使用栅格系统的时候，总结出的一些心得。

（1）在栅格系统中，页面默认将一行划分成12个列。在某个div中设定"col-(xs/sm/md/lg)-number"，代表这个div在一行占用了number个列。如下面的例子，col-lg-4和col-md-4代表在大屏和中屏的模式下每个div占用4列，即一行可以排3个div；而col-sm-12和col-xs-12代表在小屏和超小屏的模式下每个div占用12列，从而达成一行只能放置一个div的效果。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><img class="img-responsive img-thumbnail" src="p_w_picpaths/woqu.jpg"></div>
		</div>
	</div>
</body>
</html>

（2）对于栅格系统的临界宽度与容器（contain）的最大宽度，有如下规定：

屏幕大小宽度范围contain的最大宽度
超小屏width<768pxnone（自动）
小屏768px<=width<992px750px
中屏992px<=width<1200px970px
大屏width>=1200px1170px


（3）在栅格系统中，只要新增一个div类型为"row"，不管当前行有没有占满，都要另起一行。另外，如果某一行中12列已被占满，其余元素会作为一个整体在下一行显示，也就是说不存在某个元素的宽度能补上前一行空余的列就将其放在前一行的现象。下面的程序说明这个问题。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12 col-md-8"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-xs-6 col-md-4"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
		</div>
		<div class="row">
			<div class="col-xs-6 col-md-4"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-xs-6 col-md-4"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-xs-6 col-md-4"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
		</div>
		<div class="row">
			<div class="col-xs-6"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-xs-6"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
		</div>
	</div>
</body>
</html>

在如上代码生成的页面中，当页面大小为超小屏和小屏时，第一个row类中的两个元素会占据两行，第一行占据12列，第二行占据6列；第二个row类的三个元素也会占据两行，其中前两个元素分别占据6列，第三个元素转到下一行占据6列；第三个row类的两个元素分别占据6列，共占据一行。


在上面的代码中，明明在class里没有对小屏模式下占用列数的定义，为什么指定小屏模式与超小屏模式的占用列数一样呢？这就引出了第四点：

(4)对于在div的class中没有定义占用列数，其占用列数等同于在屏幕减小的趋势上距其最近的class中定义的列数。

   也就是说，只要class中有超小屏模式下的定义，即便剩余三个屏幕模式没有给出定义，其占用列也会按照超小屏模式下的定义。通常，为了凸显电脑与移动设备的不同，可以对超小屏模式和中屏模式进行设置。如果还想设计在平板上元素的摆放情况，可以在这个基础上对小屏模式进行设置。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12 col-sm-6 col-md-8"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-xs-6 col-md-4"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
		</div>
		<div class="row">
			<div class="col-xs-6 col-sm-4"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
			<div class="col-xs-6 col-sm-4"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
			<div class="clearfix visible-xs-block"></div>
			<div class="col-xs-6 col-sm-4"><img class="img-responsive" src="p_w_picpaths/woqu.jpg"></div>
		</div>
	</div>
</body>
</html>

以上主要是对于栅格模式中不同的屏幕大小，设计其对应占用列数的总结。在实际开发中，可以根据这些基本的点，灵活地设计界面。