Bootstrap網格系統

ISherry 發布于2019-08-30 13:07 / 892人閱讀

摘要：柵格系統中的列是通過指定到的值來表示其跨越的范圍。實例下圖是一個柵格系統，共有四行。然后在根目錄中，使用命令，可以自動將源代碼編譯成，放在目錄中。

什么是Bootstrap

Bootstrap是一個用于快速開發Web應用程序和網站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發，現在成為Github上最為流行的前端開發框架。它提供了一套響應式，移動設備優先的流式柵格系統，隨著屏幕或視窗尺寸增加，系統會自動分為最多12列。

柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。Bootstrap柵格系統的工作原理如下：

行(row)必須包含在.container(固定寬度)或.container-fluid(100% 寬度)中，以便為其賦予合適的排列(alignment)和內補(padding)。

通過行(row)在水平方向創建一組列(column)。

你的內容應當放置于列(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的grid-system容易的實現。

代碼如下：


    
    
      .col-md-1
      .col-md-1
      .col-md-1
      .col-md-1
      .col-md-1
      .col-md-1
      .col-md-1
      .col-md-1
      .col-md-1
      .col-md-1
      .col-md-1
      .col-md-1
    
    
    
      .col-md-8
      .col-md-4
    
    
    
      .col-md-4
      .col-md-4
      .col-md-4
    
    
    
      .col-md-6
      .col-md-6

在這段代碼中，我們使用.col-md-*柵格類，就可以創建一個基本的柵格系統。由于該例中使用的是.col-md-*，所以最佳的體驗狀態是在中等屏幕設備上, 它顯示為水平排列的多個列，所有列必須放在.row之中。使用.container-fluid是為了是該柵格系統占100%寬度。如果你想瀏覽更多的例子，請訪問bootstrap官網。

Bootstrap實現柵格系統原理

Bootstrap是基于Less構建的，但是同時還提供了一套Sass版本。本文就是通過分析Sass代碼來了解Bootstrap是如何實現柵格系統的。Bootstrap Sass版本的github地址為: https://github.com/twbs/bootstrap-sass。但是為了更加方便的理解，我將Bootstrap Sass中關于柵格系統的代碼多帶帶提取出來，創建了Bootstrap-grid-sass工程，github地址為: https://github.com/simonwoo/bootstrap-grid-sass。通過分析該項目中的代碼，你可以更好的理解柵格系統的工作原理。

該工程的項目結構為：

路徑	描述
src	關于bootstrap柵格系統的源代碼
release	編譯出來的css代碼
gruntfile	定義編譯sass到css的任務
example	例子

src中共包括以下文件：

_variables.scss定義柵格系統用到的變量，如各種設備的尺寸大小

_grid.scss定義了.container, .container-fluid, .row等樣式

_config.scss配置文件，可以在該文件中自定義柵格系統列的數目，以及列與列之間的間距

mixin目錄, 定義了一系列生成柵格系統相關的mixin和一個清除浮動的clearfix的mixin

通過改變_config.scss中的$grid-columns和$grid-gutter-width數值，來自定義你自己的柵格系統，例如，如果你覺得默認的12列系統不能滿足需求，你可以定義24列系統等。然后在根目錄中，使用grunt sass:dev命令，可以自動將scss源代碼編譯成css，放在release目錄中。

參考

Bootstrap中文站: http://v3.bootcss.com

Bootstrap Sass項目Github地址: https://github.com/twbs/bootstrap-sass

云服務器 GPU云服務器 bootstrap3網格系統 bootstrap3網格 bootstrap柵格系統 bootstrap

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115321.html

Bootstrap 網格系統布局

摘要：提供了一套響應式移動設備優先的流式網格系統，隨著屏幕或視口尺寸的增加，系統會自動分為最多列。三網格系統工作原理網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了網格系統是如何工作的行必須放置在內，以便獲得適當的對齊和內邊距。 Bootstrap 提供了一套響應式、移動設備優先的流式網格系統(Grid System)，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為...

HelKyle 2019-08-29 12:15 評論0 收藏0
Bootstrap 網格系統布局

摘要：提供了一套響應式移動設備優先的流式網格系統，隨著屏幕或視口尺寸的增加，系統會自動分為最多列。三網格系統工作原理網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了網格系統是如何工作的行必須放置在內，以便獲得適當的對齊和內邊距。 Bootstrap 提供了一套響應式、移動設備優先的流式網格系統(Grid System)，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為...

niuxiaowei111 2019-08-01 16:33 評論0 收藏0
創建自己的 CSS 網格系統【轉載 | 譯】

摘要：為了防止這種情況，給提供的最小高度并使它們浮動。基本網格準備好了一些額外的列內容樣式使我們的網格系統響應調整我們的網格以實現移動布局非常簡單。注意本指南只是創建自己響應式網格系統的起點。此文翻譯自 Creating Your Own CSS Grid System | Jan，英文不好如有錯誤 ? ，請指正。 CSS 網格已經存在很長時間了。它們通常捆綁在 Bootstrap 等框架...

gecko23 2019-08-30 15:55 評論0 收藏0