bootstrap刪格系統如何理解

Bootstrap內建了一套響應式、行動裝置優先的串流閘格系統，隨著螢幕裝置或視窗（viewport）尺寸的增加，系統會自動分成最多12列。

我在這裡是把Bootstrap中的柵格系統叫做佈局。它就是透過一系列的行（row）與列（column）的組合來建立頁面佈局，然後你的內容就可以放入到你創造好的佈局當中。以下就簡單介紹一下Bootstrap柵格系統的工作原理：

網格系統的實現原理非常簡單，僅僅是透過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最後結合媒體查詢，就製作出了強大的響應式網格系統。 Bootstrap框架中的網格系統就是將容器平分成12份。

使用的時候大家可以根據實際情況重新編譯LESS（或Sass）原始碼來修改12這個數值（也就是換成24或32，當然你也可以分成更多，但不建議這樣使用）。

（1）第一步：建立柵格系統的容器

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

解釋：為了寄予柵格系統適當的排列和padding，要把每一行「row」包含在一個容器中，而這個容器我們用class名為「container」或「container-fluid」,這兩個class是Bootstrap為我們事先設計好的。

.container是固定寬度，居中顯示：下面是Bootstrap中.container類別的程式碼

.container-fluid是100% 寬度：下面是Bootstrap中.container-fluid類別的程式碼

（2）第二步：建立適當的柵格系統

<div class="row">
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
　　<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
　　<div class="col-md-8">.col-md-8</div>
　　<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
　　<div class="col-md-4">.col-md-4</div>
　　<div class="col-md-4">.col-md-4</div>
　　<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
　　<div class="col-md-6">.col-md-6</div>
　　<div class="col-md-6">.col-md-6</div>
</div>

解釋：上面這段是我從Bootstrap官網複製下來的，每一個「row」代表一行，而內部的「col-md-數字」代表一個單元格；

Bootstrap把每一行分成12等份，「col-md-數字」中的「數字」從1-12取，數字等於幾，就佔幾份；

#合理的選擇單元格的數位配置，再往單元格中加入我們想要的內容，這樣一個柵格系統就完成了！

相關推薦：《bootstrap入門教學》

#（3）進階：儲存格的類別還有其他選擇,總共有四種：

.c0l-xs-　　無論螢幕寬度如何，單元格都在一行，寬度按照百分比設定；試用於手機；

.col-sm-　　螢幕大於768px時，單元格在一行顯示；螢幕小於768px時，獨佔一行；試用於平板；

.col-md-　　螢幕大於992px時，單元格在一行顯示；螢幕小於992px時，獨佔一行；試用於桌面顯示器；

.col-lg-　　螢幕大於1200px時，單元格在一行顯示；螢幕小於1200px時，獨佔一行；適用於大型桌面顯示器；

以上的情況可以透過下面的程式碼清晰的理解：　　　

<div class="container">
　　<div class="row">
　　　　<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
　　　　<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
　　</div>
　　<div class="row">
　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
　　　　<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
　　</div>
</div>

螢幕大於992px時：.col-md-8 和.col-md-4 還處於作用範圍內，如下：

#螢幕在769px-992px之間時：.col-md-已失效，而.col-sm- 還處在作用範圍內，如下：

螢幕寬度小於768px時，.col-sm-已失效  只有.col-xs- 不受螢幕寬度影響，這時候就由.col-xs-作用，如下：

#

以上是bootstrap刪格系統如何理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！