网站建设

了解最新公司动态及行业资讯

Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法

概括

一句话概括,就是根据显示屏幕宽度的大小,自动的选用对应的类的样式。
关键字

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)时使用。
解释

1、栅格系统都会自动的把每行row分为12列, col-xs-*、col-sm-* 、col-md-*和.col-lg-* 后面跟的参数表示在当前的屏幕中的占列数。例如 <div class="col-xs-6 col-md-3"></div> 这个div在屏幕中占的位置是: .col-xs-6 在超小屏幕中占6列,也就是屏幕的一半(12/6列=2个div), .col-md-3 在中等屏幕中占3列也就是1/4(12/3列=4个div)。

2、反推,如果我们要在移动端并排显示3个div(12/3个=每个占4 列 ),则col-xs-4;在PC端上显示6个div(12/6个=每个占2列 ) ,则 col-md-2。
实例

例一:单独使用

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

(完)

Tags: