bootstrap栅格系统的使用

bootstrap栅格系统的使用

bootstrap栅格系统的使用，主要分为四种方式

1.列组合  col-md-* 

2.列偏移 col-md-offset-*

3.列嵌套  大列组合包含着小组合

4.列排序 col-md-pull-* ,col-md-push-*

使用栅格系统时我们要先理解什么是栅格系统

bootstrap把一行（row）分为12列，我们一般，每列不是固定的宽度，而是按百分比来设置。总共分为上图四种屏幕，我们以中等屏幕（也就是浏览器宽度大于992px宽度时）为例， col-md-1 宽度相当于 8.333%，以此类推，col-md-12就是100%的宽度（但是我们不是说，一定要一行要占满12列的）。

 

1.列组合  col-md-*  也是我们最常用的方法，在写列和行时，必须在 class="container" 的div里，其中 class="row"，代表一行。下图一共有三行，其中第一行中每个div都是 class="col-md-1" 一共有12个，加起来列数为12，符合我们12列要求，他们宽度都是（1/12）8.333%。第二行第一个div占4列，第二个占8列，加起来正好12列，符合我们12列要求，第一个宽度占4/12第二个div占8/12。第三行的三个div都是占4列，宽度都为4/12。具体看效果图

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

 

2.列偏移 col-md-offset-* 就是利用1/12的margin-left（相当于margin-left： 8.333%）而已，有多少个offset，就有多少个margin-left。下列例子的第一行，一共4个div，其中最后的div col-md-4 col-md-offset-4（相当于margin-left： 33.333%），位移了4列，本身占了4列，最后也是刚好一行占满了12列。第二行，只有一个div 位移了4列，本身占了4列，只占用了8列，刚才说过了，一行不一定要占满12列。第三行第一个div位移了2列，本身占了6列，第二个div位移了1列，本身占了2列，刚好占满12列。具体对应看效果图

 

<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 class="col-md-2">col-md-1</div>
        <div class="col-md-4 col-md-offset-4">col-md-1 col-md-offset-4</div>
    </div>
    <br/>

    <div class="row">
        <div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
    </div>
    <br/>

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

 </div>

 

3.列嵌套  大列组合包含着小组合 其中大列占8/12（里面又含有2个相同小列，分别占8/12列 的6/12），另一个大列占4/12。这种大的div包含着小div是比较好理解的。

<div class="container">
    <div class="row">
        <div class="col-md-8">
            Level 1:col-md-8
            <div class="row">
                <div class="col-md-6">Level 2:col-md-6</div>
                <div class="col-md-6">Level 2:col-md-6</div>
            </div>
        </div>
        
        <div class="col-md-4">Level 1:col-md-4</div>
    </div>
</div>

 

 

 

4.列排序 col-md-pull-* ,col-md-push-*  col-md-pull 向左偏移 col-md-push 向右偏移。第一行是正常列数左右文档流2个div分别占9/12和3/12。第二行的第一个div占9/12，第二个div占3/12，但是加了 col-md-pull-6 此时div不在原来的位置了，div向左位移了6列，相当于定位到红色div上方。第三行，第一个div col-md-push-3 向右位移了3列，第二个div向左位移了9列，刚好位置进行了调换。

向右

<div class="container">
    <div class="row">
        <div class="col-md-9 ">.col-md-9</div>
        <div class="col-md-3 ">.col-md-3</div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-9" style="background: red;">.col-md-9</div>
        <div class="col-md-3 col-md-pull-6" style="background: yellow;">.col-md-3 .col-md-pull-6</div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
    </div>
</div>

 

 以上就是对bootstrap栅格系统的使用的一系列方法，最好就是自己写一下，修改一下参数，看一下效果，这样才会理解的更深刻。记得调用bootstarp.css文件就是了，复制一下我的代码看一下效果。