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柵格系統的工作原理是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！