Boostrap技能点整理之【网格系统】

今天我们来串串bootstrap总的网格系统，说到网格系统，依稀记得当时教程上不叫网格，而叫栅格，我总觉得这个栅(shān )读起来不得劲，就读他的另一个音，栅（zhà）格，每次遇到就读栅（zhà）格系统栅（zhà）格系统

好了，闲言少叙，接下来我们看看bootstrap中的网（栅）格系统。

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，这12列也是可以随便拆分与组合的，即：

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

• 使用行来创建列的水平组。

• 内容应该放置在列内，且唯有列可以是行的直接子元素。

• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。

  LESS 混合类可用于更多语义布局。

• 列通过内边距（padding）来创建列内容之间的间隙。

  该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。

  例如，要创建三个相等的列，则使用三个 .col-xs-4。

下面我们可以来写一个基本的网格结构：

<div class="container">
      <div class="row">
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
      </div>
</div>

运行结果是这样的：

我们从图中不难看出，整个网格系统将会浏览器的宽度分为了12等分，那么这12个等分可不可以进行随便组合或者随便嵌套呢？答案是肯定的。

列组合

比如我们可以这样：

<div class="row">
        <div class="col-md-3">3等分</div>
        <div class="col-md-3">3等分</div>
        <div class="col-md-3">3等分</div>
        <div class="col-md-3">3等分</div>
      </div>

也可以这样：

<div class="row">
        <div class="col-md-5">5等分</div>
        <div class="col-md-7">7等分</div>
      </div>

列偏移

或者这样：

<div class="row">
        <div class="col-md-3">3等分</div>
        <div class="col-md-3 col-md-offset-6">3等分</div>
      </div>

上面这段代码中有个新知识点，即：col-md-offset表示列偏移，偏移多少取决于后面的数字，例如本段代码就是向右偏移6等分。（中间的空格部分为6等分，大家可以自行算算）

下面再来一个关于列偏移的案例，加深一下理解：

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

（空格部分已经标注明白）

除了组合之外，我们还可以进行对网格的嵌套：

列嵌套

<div class="row">
        <div class="col-md-6">6等分
            <div class="col-md-12" style="background: mediumpurple;">12等分</div>
            <div class="col-md-6" style="background: green;">6等分</div>
            <div class="col-md-6" style="background: red;">6等分</div>
            <div class="col-md-4" style="background: yellow;">4等分</div>
            <div class="col-md-4" style="background: greenyellow;">4等分</div>
            <div class="col-md-4" style="background: darkgoldenrod;">4等分</div>
        </div>
        <div class="col-md-6" style="background: red;">6等分</div>
        
      </div>

说明一下：最外面的大的是两个6等分，左边的6等分里面：

• 第一行分为1个12等分

• 第二行分为2个6等分

• 第三行分为3个4等分

• 下面我相信大家会往下接了，例如4个3等分，6个2等分以及12个1等分

列排序

还可以对网格进行排序（稍微复杂点）

<div class="row">
        <div class="col-md-1">1等分</div>
        <div class="col-md-1 col-md-offset-1">3等分</div>
        <div class="col-md-1 col-md-offset-1">5等分</div>
        <div class="col-md-1 col-md-offset-1">7等分</div>
        <div class="col-md-1 col-md-offset-1">9等分</div>
        <div class="col-md-1 col-md-offset-1">11等分</div>
      </div>
      <div class="row">
        <div class="col-md-1 col-md-push-6">右推6等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1">1等分</div>
        <div class="col-md-1 col-md-pull-2" style="background: red;">左拉2等分</div>
        
      </div>

在分析运行结果之前，先看两个陌生词：

• push：

  推的意思，向右推，后面的数字代表拉的量

• pull：

  拉的意思，向左拉，后面的数字代表拉的量

上面这段代码就是：

• 将第一个网格向右推6等分，于是就到了7等分的位置；

• 将第5个等分向左拉2个网格，于是就到了3等分的位置

这样就好理解了吧。

以上就是今天整理的内容，有想法的可以留言至文章下面哦~

往期推荐

Boostrap技能点整理之【bootstrap简介】

2020-05-25

C#基础知识详解之【字段与属性】

2020-05-24

C#基础知识详解之【文件的输入与输出】

2020-05-23

C#基础知识详解之【值类型和引用类型】

2020-05-21

C#基础知识详解之【异常处理】

2020-05-22

欢

迎

关

注

公众号：雄雄的小课堂

CSDN：穆雄雄的博客