Bootstrap 網格系統

本章節我們將講解 Bootstrap 的網格系統（Grid System）。

Bootstrap 提供了一套響應式、移動裝置優先的流式網格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

什麼是網格（Grid）？

摘自維基百科：

在平面設計中，網格是一種由一系列用於組織內容的相交的直線（垂直的、水平的）組成的結構（通常是二維的）。它廣泛應用於列印設計中的設計佈局和內容結構。在網頁設計中，它是一種用於快速建立一致的佈局和有效地使用 HTML 和 CSS 的方法。

簡單地說，網頁設計中的網格用於組織內容，讓網站易於瀏覽，並降低使用者端的負載。

什麼是 Bootstrap 網格系統（Grid System）？

Bootstrap 官方文件中有關網格系統的描述：

Bootstrap 包含了一個響應式的、移動裝置優先的、不固定的網格系統，可以隨著裝置或視口大小的增加而適當地擴充套件到 12 列。它包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。

讓我們來理解一下上面的語句。Bootstrap 3 是移動裝置優先的，在這個意義上，Bootstrap 程式碼從小螢幕裝置（比如移動裝置、平板電腦）開始，然後擴充套件到大螢幕裝置（比如膝上型電腦、臺式電腦）上的元件和網格。

移動裝置優先策略

內容
- 決定什麼是最重要的。
佈局
- 優先設計更小的寬度。
- 基礎的 CSS 是移動裝置優先，媒體查詢是針對於平板電腦、臺式電腦。
漸進增強
- 隨著螢幕大小的增加而新增元素。

響應式網格系統隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

Bootstrap 網格系統（Grid System）的工作原理

網格系統通過一系列包含內容的行和列來建立頁面佈局。下面列出了 Bootstrap 網格系統是如何工作的：

行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
使用行來建立列的水平組。
內容應該放置在列內，且唯有列可以是行的直接子元素。
預定義的網格類，比如 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。
列通過內邊距（padding）來建立列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
網格系統是通過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。

媒體查詢

媒體查詢是非常別緻的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。如果滿足那些條件，則應用相應的樣式。

Bootstrap 中的媒體查詢允許您基於視口大小移動、顯示並隱藏內容。下面的媒體查詢在 LESS 檔案中使用，用來建立 Bootstrap 網格系統中的關鍵的分界點閾值。

/* 超小裝置（手機，小於 768px） */
/* Bootstrap 中預設情況下沒有媒體查詢 */

/* 小型裝置（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型裝置（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型裝置（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

我們有時候也會在媒體查詢程式碼中包含 max-width，從而將 CSS 的影響限制在更小範圍的螢幕大小之內。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒體查詢有兩個部分，先是一個裝置規範，然後是一個大小規則。在上面的案例中，設定了下列的規則：

讓我們來看下面這行程式碼：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

對於所有帶有 min-width: @screen-sm-min 的裝置，如果螢幕的寬度小於 @screen-sm-max，則會進行一些處理。

網格選項

下表總結了 Bootstrap 網格系統如何跨多個裝置工作：

	超小裝置手機（<768px）	小型裝置平板電腦（≥768px）	中型裝置臺式電腦（≥992px）	大型裝置臺式電腦（≥1200px）
網格行為	一直是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的
最大容器寬度	None (auto)	750px	970px	1170px
Class 字首	.col-xs-	.col-sm-	.col-md-	.col-lg-
列數量和	12	12	12	12
最大列寬	Auto	60px	78px	95px
間隙寬度	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）
可巢狀	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

基本的網格結構

下面是 Bootstrap 網格的基本結構：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

讓我們來看幾個簡單的網格例項：

響應式的列重置

以下例項包含了4個網格，但是我們在小裝置瀏覽時無法確定網格顯示的位置。

為了解決這個問題，可以使用 .clearfix class和響應式實用工具來解決，如下面例項所示：

例項

< div class = " container " > < div class = " row " > < div class = " col-xs-6 col-sm-3 " style = " background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; " > < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. </ p > </ div > < div class = " col-xs-6 col-sm-3 " style = " background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; " > < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ p > < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </ p > </ div > < div class = " clearfix visible-xs " > </ div > < div class = " col-xs-6 col-sm-3 " style = " background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444; " > < p > Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ p > </ div > < div class = " col-xs-6 col-sm-3 " style = " background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; " > < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </ p > </ div > </ div > </ div >

瀏覽器上調整視窗大小檢視變化，或在您手機上檢視效果。

偏移列

偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs-* 類不支援偏移，但是它們可以簡單地通過使用一個空的單元格來實現該效果。

為了在大螢幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。

在下面的例項中，我們有 <div class="col-md-6">..</div>，我們將使用 .col-md-offset-3 class 來居中這個 div。

例項

< div class = " container " > < h1 > Hello, world! </ h1 > < div class = " row " > < div class = " col-md-6 col-md-offset-3 " style = " background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; " > < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. </ p > </ div > </ div > </ div >

結果如下所示：

巢狀列

為了在內容中巢狀預設的網格，請新增一個新的 .row，並在一個已有的 .col-md-* 列內新增一組 .col-md-* 列。被巢狀的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。

在下面的例項中，佈局有兩個列，第二列被分為兩行四個盒子。

例項

< div class = " container " > < h1 > Hello, world! </ h1 > < div class = " row " > < div class = " col-md-3 " style = " background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; " > < h4 > 第一列 </ h4 > < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. </ p > </ div > < div class = " col-md-9 " style = " background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; " > < h4 > 第二列 - 分為四個盒子 </ h4 > < div class = " row " > < div class = " col-md-6 " style = " background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; " > < p > Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis. </ p > </ div

BOOTstrap網格系統

Bootstrap 網格系統

什麼是網格（Grid）？

什麼是 Bootstrap 網格系統（Grid System）？

移動裝置優先策略

Bootstrap 網格系統（Grid System）的工作原理

媒體查詢

網格選項

基本的網格結構

響應式的列重置

例項

偏移列

例項

巢狀列

例項

bootstrap- 網格系統

Bootstrap 網格系統例項：堆疊的水平

BOOTstrap網格系統

Bootstrap 網格系統（Grid System）

ppwjs之bootstrap網格系統（1）

ppwjs之bootstrap網格系統（6）插入單元格

bootstrap網格系統（2）

Bootstrap學習筆記(三) 網格系統

BootStrap回顧-網格系統

bootstrap柵格系統的屬性及使用

bootstrap 柵格系統自動隱藏

CSS進階之模擬Bootstrap網格布局

bootstrap-柵格系統

bootstrap柵格系統

最常用前端框架BootStrap——柵格系統

bootstarp 網格系統

Bootstrap 柵格系統簡單整理

Bootstrap 柵格系統

bootstrap--網格化布局

bootstrap網格佈局筆記

BOOTstrap網格系統

Bootstrap 網格系統

什麼是網格（Grid）？

什麼是 Bootstrap 網格系統（Grid System）？

移動裝置優先策略

Bootstrap 網格系統（Grid System）的工作原理

媒體查詢

網格選項

基本的網格結構

響應式的列重置

例項

偏移列

例項

巢狀列

例項

相關推薦