bootstrap柵格系統的工作原理

了解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>

通過“行（row）”在水平方向創建一組“列（column）”。但列數之和不能超過平分的總列數（在超過時，多余部分會換行顯示），默認12。（使用Less或者Sass可以進行自定義設置）,如下：

<div class="container">
 <div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-6"></div>
  <div class="col-md-4"></div>
 </div>
</div>

你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。

類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。

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

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

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

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

感謝各位的閱讀！看完上述內容，你們對bootstrap柵格系統的工作原理大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。