1冕杠、柵格系統(tǒng)
- Bootstrap默認的是柵格系統(tǒng)
-
柵格系統(tǒng)用于通過一系列的行（
row）與列（column）的組合來創(chuàng)建頁面布局真椿，用來盛放你的內(nèi)容 -
柵格系統(tǒng)是12列 灿意，形成一個940px寬的容器
使用.col-md-offset-*類可以將列向右側(cè)偏移 - 所有列必須放在
.row內(nèi) - 示例
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
-
效果圖
詳解
使用單一的一組 .col-md-*柵格類刹衫，就可以創(chuàng)建一個基本的柵格系統(tǒng)所灸，在手機和平板設(shè)備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍）荧琼，在桌面（中等）屏幕設(shè)備上變?yōu)樗脚帕?/em>
2譬胎、布局容器
Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個
.container容器我們提供了兩個作此用處的類，由于
padding等屬性的原因命锄，這兩種容器類不能互相嵌套.container類用于固定寬度并支持響應(yīng)式布局的容器
<div class="container">
...
</div>
- .container-fluid類用于 100% 寬度堰乔，占據(jù)全部視口（viewport）的容器。
<div class="container-fluid">
...
</div>
3脐恩、嵌套實例
- 示例
<div class="row">
<div class="col-xs-12" style="background-color: red"> 第一級別
<div class="row">
<div class="col-xs-6" style="background-color: black">第二級別</div>
<div class="col-xs-3" style="background-color: blue">第二級別</div>
</div>
</div>
</div>
-
效果圖
- Note
每個嵌套的級別的網(wǎng)格數(shù)加起來都應(yīng)該是 12 欄
參考文章推薦：
柵格系統(tǒng)
