Bootstrap網格系統

什麼是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容易的實現。

代碼以下：

<div class="container-fluid">
    
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
</div>

在這段代碼中，咱們使用.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