如果你以前使用過Bootstrap2或者瞭解過響應式技術，那麼肯定對Bootstrap柵格系統並不陌生，由於柵格系統的引入，使得Bootstrap的跨裝置佈局顯示變得可能。

什麼是柵格系統

柵格系統是指，將頁面佈局劃分為等寬的列，然後通過列數的定義來模組化頁面佈局。 Bootstrap的柵格系統採用了1-12列的模式，並且通過比例計算來設定你定義的列寬。 例如你這一行想要採用兩列的佈局模式，那麼每列的寬度都為外容器的50%，不管你用什麼裝置瀏覽，它都會採用這樣的比例進行展示。 不過如果當裝置寬度小於你設定的最小寬度，那麼這兩列就會並排成為一列。

Bootstrap的柵格系統

在Bootstrap中使用柵格系統非常簡單方便，只需要在你的div中引入它們已經定義好的類即可。 我們先看看Bootstrap有幾種柵格類可以使用： 1. .col-xs-* 這是超小螢幕類（<768px），類似手機等裝置。 2. .col-sm-* 這是小螢幕裝置類（≥768px且<992px），類似平板裝置。 3. .col-md-* 這是中型裝置類（≥992px且<1200px）。 4. .col-lg-* 這是大型裝置類（≥1200px）。

如何使用Bootstrap柵格系統

你可以通過使用這些對應裝置的柵格類來決定自己應用在不同裝置上的佈局樣式。 例如：<div class="col-xs-6 col-md-12"></div><div class="col-xs-6 col-md-12"></div>這種編碼的結果就是，這兩個div在pc端瀏覽起來是兩行（每行都佔據12列柵格），而在手機端瀏覽器來是一行兩列（每列佔據6列柵格）。 通過這種形式，就能很方便地使用柵格系統定製自己的應用佈局了。

***********************************************************************************************************************************************

實現一個簡單的柵格系統

實現一個簡單的柵格系統 關於柵格系統 相信大家都用過 Bootstrap ，柵格系統就是 Bootstrap 的核心，現在許多 UI 庫中也增加了對柵格系統的支援。

柵格系統是通過對元素增加各種不同的類名從而在不同的螢幕寬度下實現不同的效果，從而實現響應式的功能。

實現柵格系統，首要要確定兩個內容。

我們打算將螢幕分為幾類，每一類的類字首是什麼。

我們打算支援的列數是多少。

這裡我選擇與 bootstrap 相同， 即將螢幕分為四類：超小螢幕 手機 (<768px) 、小螢幕 平板 (≥768px) 、 中等螢幕 桌面顯示器 (≥992px) 、 大螢幕 大螢幕顯示器 (≥1200px) ，類字首分別為：.col-xs- 、 .col-sm- 、 .col-md- 、 .col-lg- 。列數 12。

實現 確定了我們的螢幕分類和列數之後，我們就可以開始實現了。首先我們給所有柵格系統的 class 增加浮動

.col-sm-1, .col-sm-2, ... , .col-lg-12 {     float: left; } 聲明瞭浮動，接下來我們來宣告寬度。我們從最小螢幕開始，最小螢幕不需要使用 @media來宣告， 即如果我們只聲明瞭最小寬度時他的類名，其元素將在所有情況下生效。

.col-sm-1 {     width: 8.333333%  // 十二分之一 } .col-sm-2 {     width: 16.66667%  // 十二分之二       } // ... .col-sm-12 {     width: 100%  // 十二分之十二 } 這樣最小寬度的情況我們就寫好了。接下來我們來寫其他情況

其他情況也需要宣告浮動和寬度，但是需要宣告最小螢幕寬度，我們以中等螢幕寬度舉例，中等螢幕寬度即為螢幕大於992px的情況：

@media (min-width:992) {     .col-md-1 {         width: 8.333333%  // 十二分之一     }     .col-md-2 {         width: 16.66667%  // 十二分之二           }     // ...     .col-md-12 {         width: 100%  // 十二分之十二     } } 其他情況同理，這樣我們就能實現一個簡單的柵格系統很啦。

疑問 很多小夥伴肯定會想，我們只聲明瞭最小寬度，卻沒有宣告最大寬度，這裡是不是有問題呀。

其實不是的。這裡的想法是這樣的，比如我們這裡寫了中等螢幕寬度和超小螢幕寬度兩種情況的 class ，那在超小螢幕上和小螢幕上都會按超小螢幕宣告的寬度來執行。而在中等螢幕寬度和大螢幕上，中等螢幕寬度的宣告會覆蓋超小螢幕的宣告，則會按中等螢幕宣告來執行。

最後 雖然現在的 UI 庫大都會封裝這些功能，但是自己實現一個瞭解一下原理對我們也是大有碑益的。