其實在柵格系統之前，我們已經採用過流式佈局，也可以實現響應式的佈局設計。我們在編寫普通的頁面時，經常會使用百分比的方式進行佈局，實現簡單的響應式佈局，然後為各個標籤寫我們想要的樣式。在Bootstrap中，是採用柵格系統來進行響應式的佈局。接下來我們具體看一下這個柵格系統的一些知識點以及簡單應用。

一、柵格系統的簡單介紹

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

1）“行（row）”必須包含在 .container （固定寬度）或 .container-fluid

2）通過“行（row）”在水平方向建立一組“列（column）”。

3）你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。

4）通過為“列（column）”設定 padding 屬性，從而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。

5）柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4

6）如果一“行（row）”中包含了的“列（column）”大於 12，多餘的“列（column）”所在的元素將被作為一個整體另起一行排列。

7）柵格類適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆蓋柵格類。 因此，在元素上應用任何 .col-md-*柵格類適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆蓋柵格類。 因此，在元素上應用任何 .col-lg-*不存在， 也影響大螢幕裝置。

二、柵格系統的一些具體樣式介紹

1、.container （固定寬度）或 .container-fluid （100% 寬度）

      如果是container，那麼自動帶有padding屬性，而且會自動檢測當前的寬度進行調整，即媒體查詢：

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1200px)
.container {
    width: 1170px;
}
@media (min-width: 992px)
.container {
    width: 970px;
}
@media (min-width: 768px)
.container {
    width: 750px;
}

       效果為：

 如果是container-fluid，也是帶有padding屬性，那麼寬度就是100%，也就是沒有根據當前的寬度進行設定顯示的寬度，而是100%寬度顯示。

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

     效果為：

      我們可以通過下表詳細檢視 Bootstrap 的柵格系統是如何在多種螢幕裝置上工作的。

簡單來說，其實就是：

       lg: 超大螢幕，解析度大於1200px;

       md: 普通螢幕，即中等螢幕，解析度大於992px，小於1200px;

       sm: 小螢幕，即ipad大小，解析度大於768px,小於992px;

       xs: 手機螢幕，解析度小於768px.

       柵格系統其實就是把一行平均分為12格，我們可以根據自己的需要進行設定寬度。舉一個例子說明：

<div class="container">
    <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
    </div>
</div>

     效果：

<div class="container">
    <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-6">col-lg-6</div>
    </div>
</div>

     如果我們想要一個效果，讓某一列向右偏移，那麼我們可以使用offset，比如：

    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </div>

     使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

4、push和pull的用法

    <div class="row">
        <div class="col-lg-2 col-lg-push-10">col-lg-2</div>
        <div class="col-lg-10 col-lg-pull-2">col-lg-10</div>
    </div>

注意：offset和push的區別：

    兩者都可以實現向右側偏移，但是還是有區別。當一行裡面含有多列時，使用.col-lg-offset*時，如果列數大於12，那麼會自動跳到下一行，如果使用.col-lg-push-*就會向右偏移。

<div class="row">
        <div class="col-lg-12">col-lg-12</div>
    </div>
    
    <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4 col-lg-offset-5">col-lg-4</div>
    </div>

    <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4 col-lg-push-5">col-lg-4</div>
    </div>