快捷導(dǎo)航

BootStrap3學(xué)習(xí)筆記(一)之網(wǎng)格系統(tǒng)

更新時間：2016年05月20日 11:21:00 投稿：mrr

本文給大家介紹BootStrap3網(wǎng)格系統(tǒng)的相關(guān)知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧

如果顯示網(wǎng)格，代碼應(yīng)類似這樣：

<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
<div class="col-md-4"><p>Box 4</p></div>
<div class="col-md-4"><p>Box 5</p></div>
<div class="col-md-4"><p>Box 6</p></div>
<div class="col-md-4"><p>Box 7</p></div>
<div class="col-md-4"><p>Box 8</p></div>
<div class="col-md-4"><p>Box 9</p></div>
<div class="col-md-4"><p>Box 10</p></div>
<div class="col-md-4"><p>Box 11</p></div>
<div class="col-md-4"><p>Box 12</p></div>
</div>
</div>

其中col-*-*表示不同類型設(shè)備下在網(wǎng)格系統(tǒng)中占據(jù)的列寬

極小手機(<768px)	小平板(≥768px)	中計算機(≥992px)	大計算機(≥1200px)
container最大寬度	None (auto)	`750px`	`970px`	`1170px`
類名前綴	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
最大列寬	`Auto`	`~62px`	`~81px`	`~97px`
列間隙	`15px` (i.e. `30px`)

當列的高度不同時，由于float的作用會破壞網(wǎng)格的結(jié)構(gòu)，可通過使用響應(yīng)類避免，下面是一個完整的網(wǎng)格代碼：

<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
</div>
</div>

其中的visible-*-*表示在何種設(shè)備下以何種display屬性顯示，由于極小設(shè)備默認為單列顯示，因此無需使用響應(yīng)類定制。
響應(yīng)類也可用在普通標記中，比如下面的代碼：

<p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>
<p class="visible-sm-block">This paragraph is visible only on small devices.</p>
<p class="visible-md-block">This paragraph is visible only on medium devices.</p>
<p class="visible-lg-block">This paragraph is visible only on large devices.</p>

類似的，也可使用hidden-*，設(shè)置在特定設(shè)備中隱藏：

<p class="hidden-xs">This paragraph is hidden only on extra small devices.</p>
<p class="hidden-sm">This paragraph is hidden only on small devices.</p>
<p class="hidden-md">This paragraph is hidden only on medium devices.</p>
<p class="hidden-lg">This paragraph is hidden only on large devices.</p>

通過響應(yīng)類還可以設(shè)置打印時的格式：