今天我們來串串bootstrap總的網格系統，說到網格系統，依稀記得當時教程上不叫網格，而叫柵格，我總覺得這個柵(shān?)讀起來不得勁，就讀他的另一個音，柵（zhà）格，每次遇到就讀柵（zhà）格系統柵（zhà）格系統

好了，閑言少敘，接下來我們看看bootstrap中的網（柵）格系統。

Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列，這12列也是可以隨便拆分與組合的，即：

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

• 行必須放置在?.container?class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。

• 使用行來創建列的水平組。

• 內容應該放置在列內，且唯有列可以是行的直接子元素。

• 預定義的網格類，比如?.row?和?.col-xs-4，可用于快速創建網格布局。

  LESS 混合類可用于更多語義布局。

• 列通過內邊距（padding）來創建列內容之間的間隙。

  該內邊距是通過?.rows?上的外邊距（margin）取負，表示第一列和最后一列的行偏移。

• 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。

  例如，要創建三個相等的列，則使用三個?.col-xs-4。

下面我們可以來寫一個基本的網格結構：

<div class="container"><div?class="row"><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div><div?class="col-md-1">1等分</div></div> </div>

運行結果是這樣的：

我們從圖中不難看出，整個網格系統將會瀏覽器的寬度分為了12等分，那么這12個等分可不可以進行隨便組合或者隨便嵌套呢？答案是肯定的。

列組合

比如我們可以這樣：

<div class="row"><div class="col-md-3">3等分</div><div class="col-md-3">3等分</div><div class="col-md-3">3等分</div><div class="col-md-3">3等分</div></div>

也可以這樣：

<div class="row"><div class="col-md-5">5等分</div><div class="col-md-7">7等分</div></div>

列偏移

或者這樣：

<div class="row"><div class="col-md-3">3等分</div><div class="col-md-3 col-md-offset-6">3等分</div></div>

上面這段代碼中有個新知識點，即：col-md-offset表示列偏移，偏移多少取決于后面的數字，例如本段代碼就是向右偏移6等分。（中間的空格部分為6等分，大家可以自行算算）

下面再來一個關于列偏移的案例，加深一下理解：

<div class="row"><div class="col-md-2">2等分</div><div class="col-md-2 col-md-offset-1">2等分</div><div class="col-md-2 col-md-offset-2">2等分</div><div class="col-md-2 col-md-offset-1">2等分</div></div>

（空格部分已經標注明白）

除了組合之外，我們還可以進行對網格的嵌套：

列嵌套

<div class="row"><div class="col-md-6">6等分<div class="col-md-12"?style="background: mediumpurple;">12等分</div><div class="col-md-6"?style="background: green;">6等分</div><div class="col-md-6"?style="background: red;">6等分</div><div class="col-md-4"?style="background: yellow;">4等分</div><div class="col-md-4"?style="background: greenyellow;">4等分</div><div class="col-md-4"?style="background: darkgoldenrod;">4等分</div></div><div class="col-md-6"?style="background: red;">6等分</div></div>

說明一下：最外面的大的是兩個6等分，左邊的6等分里面：

• 第一行分為1個12等分

• 第二行分為2個6等分

• 第三行分為3個4等分

• 下面我相信大家會往下接了，例如4個3等分，6個2等分以及12個1等分

列排序

還可以對網格進行排序（稍微復雜點）

<div class="row"><div class="col-md-1">1等分</div><div class="col-md-1 col-md-offset-1">3等分</div><div class="col-md-1 col-md-offset-1">5等分</div><div class="col-md-1 col-md-offset-1">7等分</div><div class="col-md-1 col-md-offset-1">9等分</div><div class="col-md-1 col-md-offset-1">11等分</div></div><div class="row"><div class="col-md-1 col-md-push-6">右推6等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1 col-md-pull-2"?style="background: red;">左拉2等分</div></div>

在分析運行結果之前，先看兩個陌生詞：

• push：

  推的意思，向右推，后面的數字代表拉的量

• pull：

  拉的意思，向左拉，后面的數字代表拉的量

上面這段代碼就是：

• 將第一個網格向右推6等分，于是就到了7等分的位置；

• 將第5個等分向左拉2個網格，于是就到了3等分的位置

這樣就好理解了吧。

以上就是今天整理的內容，有想法的可以留言至文章下面哦~

往期推薦

Boostrap技能點整理之【bootstrap簡介】

2020-05-25

C#基礎知識詳解之【字段與屬性】

2020-05-24

C#基礎知識詳解之【文件的輸入與輸出】

2020-05-23

C#基礎知識詳解之【值類型和引用類型】

2020-05-21

C#基礎知識詳解之【異常處理】

2020-05-22

歡

迎

關

注

公眾號：雄雄的小課堂

CSDN：穆雄雄的博客

總結

以上是生活随笔為你收集整理的Boostrap技能点整理之【网格系统】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。