Bootstrap3------栅格系统

1.什么是栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
Bootstrap 中包含了许多预定义，在通常我们写的页面里，浏览器缩小到一定程度，页面会错位，变形，这在Bootstrap 中不会，因为它是自适应的。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。如下图：

不同设备参数说明：

类名：
容器：container(固定宽度) container-fluid(100%)
行：row
列：col-xs col-sm col-md col-lg
例子：
大屏幕一行6个 中屏幕一行3个 小屏幕一行2个



代码：

<div class="container">
			<div class="row">
				<div class="col-md-2 col-sm-4 col-xs-6">1</div>
				<div class="col-md-2 col-sm-4 col-xs-6">2</div>
				<div class="col-md-2 col-sm-4 col-xs-6">3</div>
				<div class="col-md-2 col-sm-4 col-xs-6">4</div>
				<div class="col-md-2 col-sm-4 col-xs-6">5</div>
				<div class="col-md-2 col-sm-4 col-xs-6">6</div>
			</div>
</div>

列嵌套
为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

<div class="container">
              <div class="row">
              	<div class="col-md-4">
              		<div class="row">
              			<div class="col-md-6">1</div>
              		<div class="col-md-6">2</div>
              		</div>
              	</div>
              	<div class="col-md-4">a</div>
              	<div class="col-md-4">a</div>
              </div>
        </div>

列偏移
为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

<div class="container">
              <div class="row">
              	<div class="col-md-3">左侧</div>
              	<div class="col-md-3 col-md-offset-6">右侧</div>
              </div>
              <div class="row">
              	<div class="col-md-8 col-md-offset-2">中间</div>
              </div>
</div>

相当于加了一个margin值
列排序
通过使用.col-md-push-(向后)和.col-md-pull-（先前）类就可以改变顺序

<div class="container">
              <div class="row">
              	<div class="col-md-4">左侧</div>
              	<div class="col-md-8">右侧</div>
              </div>
              <div class="row">
              	<div class="col-md-4 col-md-push-8">左侧</div>
              	<div class="col-md-8 col-md-pull-4">右侧</div>
              </div>
              
        </div>