Bootstrap 柵欄布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 區別及使用方法

（1）概括
          一句話概括：根據顯示屏幕寬度的大小，自動的選用對應的類的樣式。

（2）關鍵字段
        1、col是column簡寫：列；

2、xs是maxsmall簡寫：超小， sm是small簡寫：小，  md是medium簡寫：中等， lg是large簡寫：大；

3、-* 表示占列數，即占每行row分12列柵格系統比；

4、.col-xs-* 超小屏幕如手機 （<768px）時使用；

     .col-sm-* 小屏幕如平板 （768px ≤ 寬度 ＜992px）時使用；

     .col-md-* 中等屏幕如普通顯示器 （992px ≤ 寬度 ＜ 1200px）時使用；

     .col-lg-* 大屏幕如大顯示器 （≥1200px）時使用。

 

（3）解釋

      為了更好的理解Bootstrap框架的網格系統工作原理，我們來看一張草圖：

最外邊框，帶有一大片白色區域，就是相當於瀏覽器的可視區域。在Bootstrap框架的網格系統中帶有響應式效果，其帶有四種類型的瀏覽器（超小屏，小屏，中屏和大屏），其斷點（像素的分界點）是768px、992px和1220px。

        通過下面的截圖可以比較清楚的來查看Bootstrap的柵格系統是如何在多種不同的移動設備上面進行工作的。

              

        從上面的截圖可以看出來，Bootstrap針對不同尺寸的屏幕（包括手機、平板、PC等等）設置了不同的樣式類，這樣讓開發人員在開發時可以有更多的選擇。

（4）實例         

        例一：單獨使用

<div class="container">
    <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>
        <!-- 說明：每row行共12列，分個3div，每個div平占4列，即3個*4列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
        <!-- 說明：每row行共12列，分個2div，第1個div占4列，第2個div則占8列，即4列+8列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-3">col-md-3</div>
        <!-- 說明：每row行共12列，分個3div，每1,3個div占3列，第2個div則占6列，即3列+6列+3列=12列 -->
    </div>
</div>

          例二：混合使用

<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">測試</div>
<!-- 
    當屏幕尺寸：
    小於 768px 的時候，用 col-xs-12 類對應的樣式；
    在 768px 到 992px 之間的時候，用 col-sm-9 類對應的樣式；
    在 992px 到 1200px 之間的時候，用 col-md-6 類對應的樣式；
    大於 1200px 的時候，用 col-lg-3 類對應的樣式；
-->