Bootstrap基础：栅格化系统

栅格系统的原理非常简单，仅仅是通过定义容器大小，平分12份，在调整内外边距，最后再结合媒体查询，就制作出了强大的响应式的栅格系统。

基本用法

1.列组合

<div class="container">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-8">col-md-8</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <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>
        </div>
        <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
        </div>
    </div>

 

 

 

 2.列偏移 用到的是.col-md-offset-*就可以偏移了  默认的是做左对齐的

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

 

 

3.列嵌套：在一个列里面在声明一个或者多个行（row），但是注意，内部嵌套的row的宽度为100%时，就说当前外部列的宽度。

如：

<div class="container">
        <div class="row">
            <div class="col-md-9">LEVEL1:col-md-9
                <div class="row">
                    <div class="col-md-6">LEVEL2:col-md-6</div>
                    <div class="col-md-6">LEVEL2:col-md-6</div>
                </div>
            </div>

            <div class="col-md-3">LEVEL1:col-md-3</div>
        </div>        
    </div>

 

4.列排序：列排序其实可以改变列的方向，也就是给编左右浮动，并且设置浮动的距离，通过.col-md-pull-*和.col-md-push来实现的。

如：

<div class="container">
        <div class="row">
            <div class="col-md-9 col-md-push-3">col-md-9</div>
            <div class="col-md-3 col-md-pull-9">col-md-3</div>
        </div>
    </div>

 

 

响应式布局

响应式栅格尺寸标准   超小(xs)屏幕设备手机（<768px）    小屏幕（sm）设备平板（>=768px）    中等屏幕（md）设备平板（>=992px）  大屏幕（lg）设备桌面（>=1200px）

1.跨设备组合定义

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

小屏幕运行效果：

中型屏幕运行效果:

 

2.清除浮动问题（clearfix visible-xs）

下图这种问题就是没有清楚浮动导致的，改正代码如下：

<div class="row">
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-6多添加内容，都添加内容</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-6</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-6</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-6</div>
</div>