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 的網格系統是響應式的，列會根據螢幕大小重新排列：在大螢幕上，內容以三列組織可能更好看，但在小螢幕上，如果內容項堆疊在一起會更好。
提示：請記住，網格列在一行中應加起來等於 12。如果超過 12，無論視口大小如何，列都將堆疊。
網格類
Bootstrap 網格系統有四種類
xs（適用於手機 - 螢幕寬度小於 768px）sm（適用於平板電腦 - 螢幕寬度等於或大於 768px）md（適用於小型筆記型電腦 - 螢幕寬度等於或大於 992px）lg（適用於筆記型電腦和桌上型電腦 - 螢幕寬度等於或大於 1200px）
以上類可以組合以建立更動態和靈活的佈局。
提示：每個類都會向上擴充套件，因此如果您希望為 xs 和 sm 設定相同的寬度，您只需指定 xs 即可。
網格系統規則
一些 Bootstrap 網格系統規則
- 行必須放置在
.container（固定寬度）或.container-fluid（全寬）中，以實現正確的對齊和填充 - 使用行來建立水平排列的列組
- 內容應放置在列中，並且只有列可以是行的直接子元素
- 預定義類（如
.row和.col-sm-4）可用於快速製作網格佈局 - 列透過填充建立間距（列內容之間的間隙）。透過對
.rows使用負外邊距，在第一列和最後一列中抵消了該填充 - 網格列是透過指定您希望跨越的 12 個可用列的數量來建立的。例如，三個等寬的列將使用三個
.col-sm-4 - 列寬以百分比表示，因此它們始終是流動的，並相對於其父元素進行大小調整
Bootstrap 網格的基本結構
以下是 Bootstrap 網格的基本結構
<div class="container">
<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>
因此，要建立您想要的佈局，請建立一個容器（<div class="container">）。接下來，建立一個行（<div class="row">）。然後，新增所需數量的列（帶有適當 .col-*-* 類的標籤）。請注意，每個行中 .col-*-* 中的數字總和應始終為 12。
網格選項
下表總結了 Bootstrap 網格系統如何在多種裝置上工作
| 超小屏 <768px |
小 >=768px |
中 >=992px |
大 >=1200px |
|
|---|---|---|---|---|
| 類字首 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 適用於 | 手機 | 平板電腦 | 小型筆記型電腦 | 筆記型電腦和桌上型電腦 |
| 網格行為 | 始終水平 | 開始時摺疊，在斷點之上水平 | 開始時摺疊，在斷點之上水平 | 開始時摺疊，在斷點之上水平 |
| 容器寬度 | 無（自動） | 750px | 970px | 1170px |
| 列數 | 12 | 12 | 12 | 12 |
| 列寬 | 自動 | 約 62px | 約 81px | 約 97px |
| 溝槽寬度 | 30px（列兩側各 15px） | 30px（列兩側各 15px） | 30px（列兩側各 15px） | 30px（列兩側各 15px） |
| 可巢狀 | 是 | 是 | 是 | 是 |
| 偏移量 | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 |
示例
接下來的章節將展示不同裝置的網格系統示例
