bootstrap栅格系统

bootstrap的栅格系统提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，每一个.row都必须包含在.container和.container-fluid中，然后只有column才能作为row的直接子元素我们可以给row增加padding值这样会抵消掉.container的margin值，同时column也会抵消掉margin值

栅格参数

	手机	平板	小屏幕显示器	大屏幕显示器
对应屏幕尺寸	<768px	>768px	>=922px	>=1200px
列数	12列	12列	12列	12列
类前缀	.col-xs	.col-sm	.col-md	.col-lg

具体使用方式

<div class="container">
# 定义了一个column的属性是在超大屏占四分之一宽度(.col-lg-3),在笔记本占三分之一的宽度(col-md-4),
# 在平板上占二分之一的宽度(col-sm-6),在手机上占满宽度(col-xs-12),最后还设置了在超大屏上的偏移量为三分之一(col-lg-offset-3)会往屏幕右边偏移三分之一
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3" style="background:#0000FF;height: 100px;">
</div>		
</div>

我们还可以将column和row嵌套使用，使用栅格系统我们能够使得div能够在任何位置，不再需要自定义css来固定div的位置

同时我们还可以交换两个div的位置，

		  <div class="row">
			  <!-- 使用col-md-offset-1使得div在容器中水平居中-->
		    <div class="col-md-10 col-md-offset-1" style="background: #FFFF00">这是level1<br>
				<div class="row">
				  <div class="col-md-6" style="background: #00FFDD">这是level2</div>
                <!--和旁边的column间隔距离为1-->
				  <div class="col-md-4  col-md-offset-1">这是level2</div>
				</div>
			  </div>

<!--交换了两个div的位置，push将div向右推动了3个单位，pull将div向左拉回了9个单位-->
        <div class="row">
          <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
          <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        </div>