Bootstrap如何做出柵格系統

這次帶給大家的是Bootstrap如何做出柵格系統，我們知道在Bootstrap裡做出柵格系統是很重要的，這篇文章就給大家好好分析一下。

Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更快速。

而柵格系統是Bootstrap中的核心，正是因為柵格系統的存在，Bootstrap才能有著如此強大的響應式佈局方案。

官方文件中是這樣說的：

Bootstrap 提供了一套響應式、行動裝置優先的流式柵格系統，隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成最多12列。包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。

我們來理解這一段話，可以發現其中最重要的部分就是行動裝置優先，那麼什麼是行動裝置優先？

　　Bootstrap的基礎CSS程式碼預設從小螢幕裝置（例如行動裝置、平板電腦）開始，然後使用媒體查詢擴展到大螢幕裝置（例如筆記型電腦、桌上型電腦）上的組件和網格。

有著以下策略：

內容：決定什麼是最重要的。
佈局：優先設計較小的寬度。
漸進增強：隨著螢幕大小增加而加入元素。

柵格系統用於透過一系列的行（row）與列（column）的組合來創建頁面佈局，你的內容就可以放入這些創建好的佈局中。

工作原理如下：

「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予適當的排列（aligment）和內補（padding）。

<div class="container"><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 -->
 <div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
 <div class="row"></div>
</div>

你的內容應當放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。

類似. row 和.col-xs-4 這種預先定義的類，可以用來快速建立柵格佈局。 也可以用來創造語意化的佈局。

透過為「列（column）」設定 padding 屬性，從而建立列與列之間的間隔（gutter）。透過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為「行（row）」所包含的「列（column）」抵消掉了padding。
負值的 margin就是為什麼下面的範例是向外突出的原因。在柵格列中的內容排成一行。

柵格系統中的欄位是透過指定1到12的值來表示其跨越的範圍。例如，三個等寬的欄位可以使用三個 .col-xs-4 來建立。

如果一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被作為一個整體另起一行排列。

柵格類別適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆寫柵格類別。 因此，在元素上應用任何 .col-md-*柵格類別適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆蓋柵格類別。 因此，在元素上應用任何 .col-lg-*不存在， 也影響大螢幕設備。

相信看了以上介紹你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼使用Vue的自訂指令完成一個下拉式選單

關於HTTP/2伺服器推送

nvm管理不同版本的node的方法

#

以上是Bootstrap如何做出柵格系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！