Bootstrap栅格系统

什么是栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。

row(行)必须包含在.container(固定宽度)或 .container-fluid (100% 宽度)中
column(列)必须放在.row内

栅格选项

bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。

栅格系统可以在多种屏幕设备上工作，实现了响应式。
col-xs- 超小屏幕 手机（<768px）。
col-sm- 小屏幕 平板 。（≥768px 且 <992px）。
col-md- 中等屏幕 桌面显示器（≥992px且<1200px）。
col-lg- 大屏幕 大桌面显示器（≥1200px）。

实例：
css

	div{
	   border: 1px solid #000;
	}

html

 <h4 class="text-center">一行中放置不相等宽的多列</h4>
    <div class="container">

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>

        <div class="row">
            <!-- 1:3 的两列 -->
            <div class="col-md-3">1</div>
            <div class="col-md-9">3</div>
        </div>
        <div class="row">
            <!-- 1:2:1 的三列 -->
            <div class="col-md-3">3</div>
            <div class="col-md-6">6</div>
            <div class="col-md-3">3</div>
        </div>
        <div class="row">
            <!-- 1:4:1 的三列 -->
            <div class="col-md-2">1</div>
            <div class="col-md-8">4</div>
            <div class="col-md-2">1</div>
        </div>
        <div class="row">
            <!-- 1:3:1 的三列 
                1:2:6:2:1
            -->
            <!-- <div class="col-md-1"></div>
            <div class="col-md-2">2</div>
            <div class="col-md-6">6</div>
            <div class="col-md-2">2</div> -->

        </div>
    </div>
    <h3></h3>
    <div class="container">
        <div class="row">
            <!-- 一行三列 每个元素等比例 -->
            <div class="col-md-4">MD1</div>
            <div class="col-md-4">MD1</div>
            <div class="col-md-4">MD1</div>
        </div>
        <div class="row">
            <!-- 一行四列 -->
            <div class="col-md-3">MD3</div>
            <div class="col-md-3">MD3</div>
            <div class="col-md-3">MD3</div>
            <div class="col-md-3">MD3</div>
        </div>
        <div class="row">
            <!-- 一行一列沾满 -->
            <div class="col-md-12">MD12</div>
        </div>
        <div class="row">
            <!-- 一行的列数总数超过12会自动换行 -->
            <div class="col-md-12">MD12</div>
            <div class="col-md-1">MD1</div>
        </div>
    </div>

效果图

1.列偏移
通过.col-md-offset-* 类可以将列向右侧偏移

这里col-md-offset-1使.col-md-3向右偏移了一个列的宽度

 <div class="row">
            <div class="col-md-2 col-md-offset-1">2</div>
            <div class="col-md-6">6</div>
            <div class="col-md-2">2</div>
 </div>

2.列排序
通过 .col-md-push-* 和 .col-md-pull-* 类改变列的顺序

<div class="row">
        <div class="col-md-1 col-md-push-2">1</div>
        <div class="col-md-2 col-md-pull-1">2</div>
</div>