BootStrap3學習筆記(一)之網格系統

2019-11-20 09:59:13

字體：大中小

來源：轉載

供稿：網友

如果顯示網格，代碼應類似這樣：

<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-*-*表示不同類型設備下在網格系統中占據的列寬

極小手機(<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的作用會破壞網格的結構，可通過使用響應類避免，下面是一個完整的網格代碼：

<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-*-*表示在何種設備下以何種display屬性顯示，由于極小設備默認為單列顯示，因此無需使用響應類定制。
響應類也可用在普通標記中，比如下面的代碼：

<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-*，設置在特定設備中隱藏：

<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>

通過響應類還可以設置打印時的格式：