Bootstrap框架的要点--栅格系统

不同的公司要求使用框架有所不同，而Bootstrap框架在工作中使用频次较高，其中栅格系统在这一框架中的地位不容小觑，下面我们开始聊聊它吧。

简单介绍：

Bootstrap提供了一套响应式、移动设备优先的栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列，栅格系统用于通过一系列的行或列的组合来创建页面布局，而你的内容就放在这些创建好的布局中。这一框架的使用主要是合理且灵活的使用类，因此笔者在下文中聊的大部分是如果给元素加上相应的类。

聊聊各种屏幕：在讲其他的之前，我们有必要先回忆下各种屏幕，暂且将其分为4类，它们分别是超小屏幕，比如手机，一般小于768px;小屏幕，比如平板，一般大于768px;中等屏幕，比如桌面显示器,大于992px;还有就是大于1200px 的大屏幕，比如大桌面显示器。

栅格参数：

在超小屏幕上总是水平排列，这时候你要给它加上的类的前缀是.col-xs-；而除此之外的屏幕开始时堆叠在一起的，当大于这些阈值时将变成水平排列。小屏幕的类前缀是.col-sm-,中等屏幕的类前缀是.col-md-,大屏幕的类前缀是.col-lg-。以上各种的槽宽都是30px(每列左右均有15px),都可偏移(offset)、嵌套、列排序，这些笔者将在下文中一一解释。

实例：布局的变化过程

顺便提一下，写Bootstrap框架式一定不要忘记引用以下3个文件，首先你需要把这3个提前下载好，由于每个人的存放路径不同，在此贴出图片，具体引用情况因每个人的存放路径而异。

(1)　　Bootstrap层叠样式表

(2)　　jQuery库，这里只是加载一个jQuery库就可以了，你也可以引用其他版本的

(3)　　加载Bootstrap的核心JS库

代码主要部分如下，记住所有的列都必须写在行(.row)内！

<div class="container bg-info">
        <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>
        <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>

你将得到如下页面：

通过缩放屏幕你可以看到布局由堆叠到对平排列。

列偏移：使用.col-md-offset-*的类使该列向右偏移

代码演示如下：

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

你将看到如下页面：

你可以改变.col-md-offset-*中的*来感受下偏移的效果

嵌套列：通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的.col-sm-* 元素内，记住！被嵌套的行的列数不要超过12

代码演示如下：

<div class="container bg-info">
        <div class="row">
            <div class="col-sm-9">
                Lever 1: .col-sm-9
                <div class="row">
                    <div class="col-xs-8 col-sm-6">        
                        Lever 2:.col-xs-8 .col-sm-6
                    </div>
                    <div class="col-xs-4 col-sm-6">
                        Lever 2:.col-xs-4 .col-sm-6
                    </div>
                </div>
            </div>
        </div>
    </div>

你将看到如下页面

Lever 2的元素总宽度是继承Lever1:.col-sm-9的，以此为基础来把1行再化成12列的。

列排序：用.col-md-push-*和.col-md-pull-*来改变列的顺序，我们从字面翻译来就可以很轻松的来理解这两个类的含义，push就是推，把这个东西从原来的位置推走，就是把它推到后面去了，pull就是拉，把这个东西拉过来，意思就是把它拉倒前面

下面来看下代码演示：

<div class="container">
        <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>

你就可以看到如下页面：

我们在代码里明明是把.col-md-9 .col-md-push-3写在了前面，它却实际上显示在了后面，这就是push在其中作梗。

以上就是今天要分享的，希望对您有帮助