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所在元素整體的另起一行排列。