原文位址： http://www.work100.net/training/monolithic-frameworks-bootstrap-grid-system.html 更多教程： 光束雲 - 免費課程
網格系統
| 序号 | 文内章節 | 視訊 |
|---|---|---|
| 1 | 概述 | - |
| 2 | 什麼是網格（Grid） | |
| 3 | 什麼是Bootstrap網格系統 | |
| 4 | 工作原理 | |
| 5 | 網格選項 |
請參照如上
章節導航
進行閱讀
1.概述
Bootstrap 提供了一套響應式、移動裝置優先的流式網格系統，随着螢幕或視口（viewport）尺寸的增加，系統會自動分為最多 12 列。
2.什麼是網格（Grid）
在平面設計中，網格是一種由一系列用于組織内容的相交的直線（垂直的、水準的）組成的結構（通常是二維的）。它廣泛應用于列印設計中的設計布局和内容結構。在網頁設計中，它是一種用于快速建立一緻的布局和有效地使用 HTML 和 CSS 的方法。
簡單地說，網頁設計中的網格用于組織内容，讓網站易于浏覽，并降低使用者端的負載。
3.什麼是Bootstrap網格系統
Bootstrap 官方文檔中有關網格系統的描述：
Bootstrap 包含了一個響應式的、移動裝置優先的、不固定的網格系統，可以随着裝置或視口大小的增加而适當地擴充到 12 列。它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。
讓我們來了解一下上面的語句。Bootstrap 是移動裝置優先的，在這個意義上，Bootstrap 代碼從小螢幕裝置（比如移動裝置、平闆電腦）開始，然後擴充到大螢幕裝置（比如筆記本電腦、台式電腦）上的元件和網格。
移動裝置優先政策
- 内容
- 決定什麼是最重要的
- 布局
- 優先設計更小的寬度
- 基礎的 CSS 是移動裝置優先，媒體查詢 是針對于平闆電腦、台式電腦
- 漸進增強
- 随着螢幕大小的增加而添加元素
響應式網格系統随着螢幕或視口（viewport）尺寸的增加，系統會自動分為最多 12 列。
4.工作原理
網格系統通過一系列包含内容的行和列來建立頁面布局。下面列出了 Bootstrap 網格系統是如何工作的：
- 行必須放置在
.container
- 使用行來建立列的水準組。
- 内容應該放置在列内，且唯有列可以是行的直接子元素。
- 預定義的網格類，比如
.row
.col-xs-4
- 列通過内邊距（padding）來建立列内容之間的間隙。該内邊距是通過
.rows
- 網格系統是通過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個
.col-xs-4
5.網格選項
下表總結了 Bootstrap 網格系統如何跨多個裝置工作：
| 表述 | 超小裝置手機（<768px） | 小型裝置平闆電腦（≥768px） | 中型裝置台式電腦（≥992px） | 大型裝置台式電腦（≥1200px） |
|---|---|---|---|---|
| 網格行為 | 一直是水準的 | 以折疊開始，斷點以上是水準的 | ||
| 最大容器寬度 | None (auto) | 750px | 970px | 1170px |
| Class 字首 | | | | |
| 列數量和 | 12 | |||
| 最大列寬 | Auto | 60px | 78px | 95px |
| 間隙寬度 | 30px （一個列的每邊分别 15px） | |||
| 可嵌套 | Yes | |||
| 偏移量 | ||||
| 列排序 |
基本的網格結構
下面是 Bootstrap 網格的基本結構：
<div class="container" style="border: 1px solid green;">
<div class="row">
<div class="col-md-6" style="border: 1px solid red;">左</div>
<div class="col-md-6" style="border: 1px solid red;">右</div>
</div>
<div class="row">
<div class="col-md-6" style="border: 1px solid blue;">左</div>
<div class="col-md-6" style="border: 1px solid blue;">右</div>
</div>
</div> 運作效果如下：
打開浏覽器開發者模式，移動端效果示範：
上圖可以看到，移動端頁面布局發生了變化，這就是 Bootstrap 的重要特性：自适應布局
源碼擷取
執行個體源碼已經托管到如下位址：
- https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap
- https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap
上一篇：
環境搭建下一篇：
媒體查詢如果對課程内容感興趣，可以掃碼關注我們的或公衆号
，及時關注我們的課程更新QQ群