Bootstrap 3 網格系統簡介

　　在將近9個月的打磨之後， Bootstrap 3 來到了我們的面前。它展示了一種新的思路來考慮響應式網格系統究竟應該如何運作， 其最佳應用時機， 以及如何處理樣式化的元素的響應式斷點.大約一個月以前， 我決定立即跳上這艘大船來開始追隨新的潮流， 所以我使用它創作了一個新的部落格主題(就是你現在看見的這個)並且學到了相當多的東西， 超出了我的預想. 這也是本文著力探討的問題， 即分享一些我的使用感受和經驗。

　　Bootstrap 2 的網格系統十分的直觀， 如果你過去使用的是固定寬度的容器， 那麼存在標準， 大尺寸， 平板以及移動版這些可選尺寸. 基準樣式均基於"桌面"環境的尺寸來進行構建， 移動版樣式則通過隨後的響應式樣式表來進行應用. 相較於 V3， 它在開箱即用的這種便利性上做得十分的有限.

　　Bootstrap 3 重點宣揚的一點就是移動優先，過去一年中存在著一些針對移動優先思想的設計運動，就是說你應優先使用移動視角來考慮一些概念以及使用者體驗，你的互動設計，線框圖，原型等均基於移動體驗來進行初始化的設計。Bootstrap 3 採納了該理念並將整個框架構建於該理念之上， 即你應該預設通過移動視角來建立基礎CSS樣式和html結構程式碼。

　以移動為優先的CSS

　　非常好。如果我從沒有這樣幹過，這意味著什麼 ? 很好，讓我們跳到一個簡單的小例子。假設現在有一個h1標籤擺放在你網站的頂端。你在你的瀏覽器中設計好並稍微檢查了一下 —— 看起來棒極了。然後你把瀏覽器拉成一個手機螢幕的大小， 你就會發現這個字型有點太大了！ 讓我們在以移動為優先之後好好思考下： Bootstrap 認為你放在h1標籤上的樣式對移動裝置的寬度是合適的。 所以說如果你在桌面大小上給你的字型設定大小、填充、邊緣什麼的話，那麼在移動裝置的寬度下會變的相當不同。  

　　這裡有這麼一個例子：

h1 {
  font-size: 40px;
  margin-bottom: 20px;
  margin-left: 20px;
}

　　如果你想在桌面上看他，一個40px字型大小是個不錯的主意。 但如果放在移動裝置的大小上，這就顯得有些太大了。 你非得用一個移動CSS框架來做這件事嗎？ 就像這樣：

h1 {
  font-size: 22px;
  margin: bottom 10px;
  @media min-width(@screen-tablet) {
    font-size: 40px;
    margin-bottom: 20px;
    margin-left: 20px;
  }
}

　　看看，簡約風格就是移動風格。 任何你想在大尺寸中改變的東西都被封裝在了這個@screen-table媒體查詢中。我們字型的預設大小是22px， 但是在桌面上時就變成了40px。而且你可以看到在基本樣式中我並不需要一個margin-left， 但是我在@screen-tablet中放了一個， 所以他只會在超過了最小寬度的時候被應用。

　網格的基礎組合

　　為了將網格系統組合到你的HTML中，我們需要有一些大的修改。這裡有4個不同的網格類可以被應用到你的佈局中。如果你之前沒有用過這樣的框架，或者你已經習慣了 Bootstrap v2，這是一個看待它的新方式。這裡有4個列的類名字首：

• col-xs-*
• col-sm-*
• col-md-*
• col-lg-*

　　至此， 在你恐慌和想到“我不得不像個笨蛋一樣在字首上一個個標數字嗎？！”大概不會。大多數時候，這種樣式中的各種大小都已經被定義好了， 尤其是平板電腦和比較大的尺寸。只有當你對比較大的尺寸有特殊要求的時候才需要調整。

　　這可能會花費一些額外的時間， 但是:

1. 相對於同時保有一個"桌面優先"的基礎樣式表和一個純移動版的樣式表的舊式做法來說， 這種方式更佳.
2. 一旦你習慣了這種方式， 其靈活性以及功能將會彌補存在的疑問或不足.

　　新方式實行的前提是網格系統是由視口尺寸經由媒體查詢來控制的， 一旦瀏覽器寬度變大， 不同的列的class將會重寫之前的. 所以按手機寬度來說，“xs (極小尺寸)”列的class就會被啟用. 但是如果你將瀏覽器寬度拉伸， “lg (大尺寸)”的列就會啟用並重寫更小的尺寸. 如果你感到不解的話， 請堅持閱讀下去. 這是一個全新的 Bootstrap 正規化， 較之 Bootstrap 2 的彈性(橡皮筋)處理方式， 現在 v3 可以讓你在每個斷點處實行增量控制.

　　很有用對吧? 不? 不明白是咋回事? 那我們繼續往下看吧!

　例子 1 – 等列寬

　　我嘗試著儘可能的簡單的解釋一下：現在你有2個div。你希望每個div的寬度為容器總寬度的50%，

<div class="">I’m on the left</div>
<div class="">I’m on the right</div>

　　之前，在使用 Bootstrap 2的時候，我們可以給每個div指定class為span6。這樣在平板或者更大尺寸的裝置上我們會看到按50%/50%分割的2列，然後在達到響應式臨界點時都會變成100%寬的列。但在 Bootstrap 3中不是這樣了，自從它成為了一個移動優先的框架，所有的列都被預設為100%的寬度，垂直堆疊，在這個的例子中，如果你還是希望2個div各佔50%； 你首先要決定在哪一個 斷點這樣顯示，如果你說“我只想讓他們在桌面上按50%/50%顯示，不關心平板或手機”，那你可以這樣寫：

<div class="col-md-6">I'm on the left</div>
<div class="col-md-6">I'm on the right</div>

　　這也就是，”在中等或以上的寬度上，給我做一個6列寬出來“。任何小於中等的元素，都將會回到100％寬度的堆疊式佈局中（譯者註釋：因為每一個元素都是100％寬度，所以元素會被垂直疊放）。這是移動優先的設計，所有的內容都被假定於你在為一個移動裝置做設計，相對比較小的檢視。因此，假如說你想讓它是50％對50％的劃分屏寬，並且直到最小寬度上的手機都有效，無論怎樣，你需要使用一個不同的類來做到這一點。如”保持一個50％的列寬，並且向下適合於手機的尺寸“所言。你要使用新的”xs“（相對小）的類：

<div class="col-xs-6">I’m on the left</div>
<div class="col-xs-6">I’m on the right</div>

　　基本上，這就是”保持在一個6列的寬度，並向下適合於手機的尺寸，而永不切換到堆疊式的移動佈局中“。這意味著，在一個手機上，由於你是用了特定的col－xs－6類，所以它將仍然是一個50％對50％的列寬。從另一個方向來看，如果你想要同樣的div保持於50％對50％的列寬，而作用於最大寬度的臨界相應點上，而僅在此點上有效。這同樣簡單：

<div class="col-lg-6">I’m on the left</div>
<div class="col-lg-6">I’m on the right</div>

　　這就是告訴它，僅應用”6列寬度“在較大或者更大的尺寸上。一旦你到達了分界點，從而列寬變窄，它會再次假定這是一個移動設計，所以使用100％的寬度。我為此文製作了一些樣本頁面，而樣本1，就是用來展示這種最基本的概念。

　混合寬度列布局

　　現在我們已經大致瞭解了HTML標記類是怎麼工作的。但是，我們可以再深入些。這次我們還是使用2個div並且讓它們在中等視口上以50%50%分割：

<div class="col-md-6">I'm on the left</div>
<div class="col-md-6">I'm on the right</div>

　　現在，這裡有一些新東西。假如在中等視口上，你想以50/50佈局，而在大視口上，你設計的是以33%66%佈局更好。所以我們將要做的就是在轉折點處改變列寬度進行佈局。

<div class="col-md-6 col-lg-4">I’m on the left</div>
<div class="col-md-6 col-lg-8">I’m on the right</div>

　　這有何意義呢？Bootstrap會告訴你，在中等尺寸的視口 ，我將會查詢帶有'md'的類，並使用它們。在大視口尺寸，我會查詢那些帶有'lg'的類，並使用它們。同樣，我們的兩個div將會從50%50%分割到33%66%分割，就如Bootstrap說的那樣。這種方法同樣可以應用到其它級別視口上，如我們想在比較小的手機上改變佈局。假如我們想在平板上使用25%75%的列布局，我們可以這樣做:

<div class="col-sm-3 col-md-6 col-lg-4">I’m on the left</div>
<div class="col-sm-9 col-md-6 col-lg-8">I’m on the right</div>

　　現在，每個節點上有三種不同的列布局。在手機上，它會是左邊25%，右邊75%。在平板上，它會以50%50%等比分割。在大的視口上，它會以33%66%的比例分割。3種不同的佈局對應於三種響應式尺寸。參看示例2:

但是，我知道你在想些什麼；在你的HTML裡有太多標籤了，你可能在一個網格中會用到4種不同的類。有些人關注這些，有些人可能不會。但這裡也有一個答案，那就是: mixins。

　混合類

　　Bootstrap 2 可以用混合類來建立列布局，在v3中將會更多的用到混合類。你光用混合類就可以建立你得行和列布局，而且你可以不用在HTML中使用網格標籤。下面是2個能建立網格系統的基本類：

• .make-row();
• .mae-xs/sm/md/lg-column();

　　你也可以在元素裡使用混入類以達到你的目的。這裡有個例子，一個是在單個div裡從左至右建立行，一個是列：

<div class="left-and-right">
  <div class="left">I'm on the left</div>
  <div class="right">I'm on the right</div>
</div>

　　這裡我們沒有用列類，所以這些div將是以塊級別來顯示。因為我們想要用網格，但又不能用任何標籤，所以我們將用混合類來建立行和列，(當然是用Less了).如果上面的例子用HTML來建立的話將是如下的樣子:

.left-and-right {
  .make-row();
  .left {
    .make-md-column(6);
  }
  .right {
    .make-md-column(6);
  }
}

　　這樣將會在HTML中新增col-md-6類屬性。運用混合類，你就不用再HTML中包含任何標籤了。

　　回頭看看例子2的多元性，不同的視窗是基於不同元素的，當然我們用混合類也能實現的。一旦你知道每一個響應式佈局的大小後，你只需要給在每一個media query中新增列混合類。這裡有4個用混合類來處理佈局大小的例子：

.left-and-right {
  .make-row();
  .left {
    .make-xs-column(12);
    @media(min-width: @screen-tablet) {
      .make-sm-column(1);
    }
    @media(min-width: @screen-desktop) {
      .make-md-column(7);
    }
    @media(min-width: @screen-large-desktop) {
      .make-lg-column(4);
    }
  }
  .right {
    .make-xs-column(12);
    @media(min-width: @screen-tablet) {
      .make-sm-column(11);
    }
    @media(min-width: @screen-desktop) {
      .make-md-column(5);
    }
    @media(min-width: @screen-large-desktop) {
      .make-lg-column(8);
    }
  }
}

　　在每一個佈局中我們用.left和.right來改變列寬度。在這個比較怪異的例子中，用.left和.right就能實現漂亮的跳轉功能，但效果將在例子3中可以飽覽無遺:

　　同時在這個例子中，因為我們用了make-xs-column()混合類，手機處理網格大小時仍然維持並行的列，而不是垂直疊加的。截至目前，Bootstrap不允許在手機中使用列混合類，你得包含如上面的make-xs-column(12)，這樣在根類中就能擁有Bootstrap基本的網格CSS屬性了，如果你想要自定義混合類，我已經制作了一個例子，以備萬一Bootstrap將來出現狀況：Bootsrap 3 Smallest Column Mixin

　拉/推/偏移

　　無論是在HTML類或是混合方法中，偏移和拉/推以同樣的方式工作。你可以在標籤中以類的方式包含它們，或者是動態的的混合方式。這兩者的不同之處是如果你用HTML方法，將禁止寬度偏移以及在任何情況下都不能改變佈局。如果你想要你有寬度偏移，你就得使用混合方式。我不確定為什麼會有這些區別，但事實就是這樣的。

　　在使用拉/推的方式時，你可以很容易的漂移，左右移動視窗，也在整個移動裝置的螢幕上上下移動。在已經很強大的網格系統中會讓你有無限的可能。

　同時用響應式類屬性和混合式網格列

　　想想我們已經學到的，我們可以同時利用CSS響應式屬性和混合式列形成任何你想要的。這更接近於一個誇大的真實世界的樣子：

.main-content {
  .make-row();
  .sidebar {
    padding: 20px;
    @media(min-width: @screen-desktop) {
      padding: 30px;
    }
    h2 {
      font-size: 20px;
      @media(min-width: @screen-desktop) {
        font-size: 30px
      }
    }
    .make-xs-column(12);
    @media(min-width: @screen-tablet) {
      .make-sm-column(2);
    }
    @media(min-width: @screen-desktop) {
      .make-md-column(3);
    }
  }
  .content-area {
    line-height: 1.2em;
    @media(min-width: @screen-desktop) {
      line-height: 1.6em;
    }
    h1 {
      font-size: 30px;
      @media(min-width: @screen-desktop) {
        font-size: 40px;
      }
    }
    .make-xs-column(12);
    @media(min-width: @screen-tablet) {
      .make-sm-column(10);
    }
    @media(min-width: @screen-tablet) {
      .make-md-column(9);
    }
  }
}

　　從本質上來說，它是讓你在每個響應式寬中有完全不同的佈局，無論是在網格系統中還是在風格集合中，而且它不會讓你在寫Less時會有很多工作要做。還有個好處是如果你已經知道怎樣用列混合的方式，那麼你不需要改變任何HTML內容。

　　在使用的時候要記住一件事，這些風格是在基本的移動裝置CSS中的“上面或是外面”。你甚至可以為桌面檢視來設計樣式，那麼你就得從移動寬到桌面風格都得改變CSS以適應不同的螢幕，之後你就得在基本水平上固定/取代風格。如果你不關心這些在移動裝置上顯示的是否完美，那這就變的簡單了。如果你不想你得網站有很好的體驗，那就開啟2個瀏覽器-一個適應桌面寬，一個適應移動裝置寬度。這樣至少你就能看到每一個檢視上一些糟糕的東西。

　來幫他們改進吧!

　　Bootstrap 3 推動了整個移動優先CSS規範的發展，並且讓很多從來沒有做過移動優先開發的人也能夠輕易上手。它越來越具有動態性和靈活性，而且我認為最後它一定更易於使用。

　　總而言之，使用Bootstrap 3讓我非常激動。我非常痴迷Bootstrap 2，Bootstrap 3向前邁進了很大一步以至於很難讓人不對 @twbootstrap guys (@md0， @fat) 和Github 的貢獻者為這所在的工作感到驚喜。

現在就去get Bootstrap嘗試一下吧！如果你有任何意見，問題，需要幫助，有一些想法或者其他的，都可以提交到網站下方的Disqus區域。

　　原文地址：http://www.helloerik.com/bootstrap-3-grid-introduction