BSP:Bootstrap基本布局（container, row, col-xs-4）
class:
container, container-fluid, row,
col-xs-1, col-sm-1,col-md-1, col-lg-1
col-md-offset-1
col-md-push-1
col-md-pull-1
12列格网布局:最多分为12列，随着屏幕设备或视口尺寸变化
格网布局由行（row）和列（column）构成。
用户将内容填充到格网布局的格子里面。
使用方法
添加meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximun-scale=1, user-scalable=no" />
initial-scale:初始缩放比例
maximun-scale:最大缩放比例。
user-scalable:禁止用户缩放
使用容器包裹栅格系统:container,container-fluid
container：有最大宽度
container-fluid:无最大宽度
container最大宽度列表
对多种屏幕设置显示方式：
<style> .a { height: 100px; background-color: #eee; border:1px solid #ccc; } </style> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> </div> </div>
注：row中col可以换行，但col中嵌套的col不能换行
给列之间加空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div>
注：折叠后col-md-offset-1失效
将列向后退或向前拉:col-md-push-3,col-md-pull-9
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>
栅格系统特点：
- “行”（row）必需包含在.container或.container-fluid中
- "行"（row）的直接子元素必需是“列”（column）
- "行"（row）的负值margin抵消了.container的padding.使得“列”（column）的两端距离container边界是15px.
- 如果column大于12，多余的column所在元素整体的另起一行排列。
