這次帶給大家的是Bootstrap如何做出柵格系統,我們知道在Bootstrap裡做出柵格系統是很重要的,這篇文章就給大家好好分析一下。
Bootstrap 是基於 HTML、CSS、JAVASCRIPT的,它簡潔靈活,使得 Web 開發更快速。
而柵格系統是Bootstrap中的核心,正是因為柵格系統的存在,Bootstrap才能有著如此強大的響應式佈局方案。
官方文件中是這樣說的:
Bootstrap 提供了一套響應式、行動裝置優先的流式柵格系統,隨著螢幕或視窗(viewport)尺寸的增加,系統會自動分成最多12列。包含了用於簡單的佈局選項的預定義類,也包含了用於生成更多語義佈局的功能強大的混合類。
我們來理解這一段話,可以發現其中最重要的部分就是行動裝置優先,那麼什麼是行動裝置優先?
Bootstrap的基礎CSS程式碼預設從小螢幕裝置(例如行動裝置、平板電腦)開始,然後使用媒體查詢擴展到大螢幕裝置(例如筆記型電腦、桌上型電腦)上的組件和網格。
有著以下策略:
內容:決定什麼是最重要的。
佈局:優先設計較小的寬度。
漸進增強:隨著螢幕大小增加而加入元素。
柵格系統用於透過一系列的行(row)與列(column)的組合來創建頁面佈局,你的內容就可以放入這些創建好的佈局中。
工作原理如下:
「行(row)」必須包含在 .container (固定寬度)或 .container-fluid (100% 寬度)中,以便為其賦予適當的排列(aligment)和內補(padding)。
你的內容應當放置於「列(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中文網其它相關文章!
相關閱讀:
#以上是Bootstrap如何做出柵格系統的詳細內容。更多資訊請關注PHP中文網其他相關文章!