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 类对应的样式；
-->