Bootstrap 網格
Bootstrap 網格系統
Bootstrap 的網格系統允許頁面上有最多 12 列。
如果您不想單獨使用所有 12 列，可以將列組合在一起以建立更寬的列。
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 12 | |||||||||||
Bootstrap 的網格系統是響應式的，並且列會根據螢幕大小自動重新排列。
網格類
Bootstrap 網格系統有四個類
xs(用於手機 - 螢幕寬度小於 768px)sm(用於平板電腦 - 螢幕寬度等於或大於 768px)md(用於小型筆記型電腦 - 螢幕寬度等於或大於 992px)lg(用於筆記型電腦和桌上型電腦 - 螢幕寬度等於或大於 1200px)
以上類可以組合以建立更動態和靈活的佈局。
Bootstrap 網格的基本結構
以下是 Bootstrap 網格的基本結構
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
首先；建立一個行 (<div class="row">)。然後，新增所需的列（帶有適當 .col-*-* 類的標籤）。請注意，.col-*-* 中的數字應始終為每行加起來等於 12。
下面我們收集了一些基本的 Bootstrap 網格佈局示例。
三個等寬列
.col-sm-4
.col-sm-4
.col-sm-4
以下示例展示瞭如何從平板電腦開始，並擴充套件到大型桌上型電腦，建立三個等寬的列。在手機或螢幕寬度小於 768px 的情況下，列將自動堆疊
示例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
自己動手試一試 »
兩個不等寬列
.col-sm-4
.col-sm-8
以下示例展示瞭如何從平板電腦開始，並擴充套件到大型桌上型電腦，建立兩個不同寬度的列
示例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
自己動手試一試 »
提示：您將在本教程的後面部分了解更多關於 Bootstrap 網格的內容。
