Bootstrap栅格系统

栅格系统

栅格系统是Bootstrap响应式布局的框架，栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局：

• 行（.row）必须包含在容器container或container-fluid里；
• 在行内创建一组水平排开的列（.col）；
• 每一行被分为12格，通过类似.col-sm-4的类来控制每一列占位多少格（这里是4格）；
• 每一行的列所占格数超过12，便会引起换行；
• 可以对不同大小的屏幕定义不同的布局:
  col-xs-*,col-sm-*,col-md-*,col-lg-*分别代表手机、平板、显示器、大显示器。*则代表所需要设置的格子数，范围1,12
• 列偏移.col-md-offset-*:使用.col-md-4 元素向右侧偏移了4个列的宽度;并影响后续所有的列.
• 列排序 控制列左/右移动，不影响其他列
  .col-lg/md/sm/xs-pull-* 拉
.col-lg/md/sm/xs-push-* 推

<div class="container bg">        
	<div class="row">            
		<!-- 只有在md尺寸的屏幕下 MD-3隐藏-->            
		<div class="col-md-3 bgMD3">MD-3</div>            
		<div class="col-md-9 bgMD9">MD-9</div>        
	</div>        
	<div class="row">            
		<!-- 只有在md尺寸的屏幕下，MD-3和MD—9交换出现的位置-->            
		<div class="col-md-3  bgMD3 col-md-push-9">MD-3</div>            
		<div class="col-md-9 bgMD9 col-md-pull-3">MD-9</div>        
	</div>    
</div>