如果顯示網格，代碼應類似這樣：
<div><div><div><p>Box 1</p></div><div><p>Box 2</p></div><div><p>Box 3</p></div><div><p>Box 4</p></div><div><p>Box 5</p></div><div><p>Box 6</p></div><div><p>Box 7</p></div><div><p>Box 8</p></div><div><p>Box 9</p></div><div><p>Box 10</p></div><div><p>Box 11</p></div><div><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 (ie 30px ) | |||
當列的高度不同時，由於float的作用會破壞網格的結構，可通過使用響應類避免，下面是一個完整的網格代碼：
<div><div><div><p>Box 1</p></div><div><p>Box 2</p></div><div></div><div><p>Box 3</p></div><div></div><div><p>Box 4</p></div><div></div><div></div><div><p>Box 5</p></div><div><p>Box 6</p></div><div></div><div></div><div><p>Box 7</p></div><div><p>Box 8</p></div><div></div><div></div><div><p>Box 9</p></div><div></div><div><p>Box 10</p></div><div></div><div><p>Box 11</p></div><div><p>Box 12</p></div></div></div>
其中的visible-*-*表示在何種設備下以何種display屬性顯示，由於極小設備默認為單列顯示，因此無需使用響應類定制。
響應類也可用在普通標記中，比如下面的代碼：
<p>This paragraph is visible only on extra small devices.</p><p>This paragraph is visible only on small devices.</p><p>This paragraph is visible only on medium devices.</p><p>This paragraph is visible only on large devices.</p>
類似的，也可使用hidden-*，設置在特定設備中隱藏：
<p>This paragraph is hidden only on extra small devices.</p><p>This paragraph is hidden only on small devices.</p><p>This paragraph is hidden only on medium devices.</p><p>This paragraph is hidden only on large devices.</p>
通過響應類還可以設置打印時的格式：
以上所述是小編給大家介紹的BootStrap3學習筆記(一)之網格系統，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！