Bootstrap布局之网格系统

Bootstrap中的网格系统

1、关于网格系统的简单介绍

• 网格系统中的内容需要放置在容器中。
  • 容器一般有两种类， .container和.container-fluid
  • Container 可以规定宽度
  • Container-fluid 默认是全屏大小
• 关于行列关系的介绍
  • 行是列的包装
  • 内容必须放在列中，并且只有列才能作为行的直接子代
  • 我们可以对列进行一些约束，比如大小，比如设备。
  • 我们可以对列的边距进行一些修改。
• 列中的关于设备的不同类
  • Extra small .col-
  • small .col-sm-
  • Medium .col-md-
  • Large .col-lg-
  • Extra Lagre .col-xl-

2、一些关于网格系统的实例

2.1 等宽

网格布局中，每列的宽度都是一致的。

<div class="container border">
  <div class="row border">
    <div class="col border">
      1 of 2
    </div>
    <div class="col border">
      2 of 2
    </div>
  </div>
  <div class="row border">
    <div class="col border">
      1 of 3
    </div>
    <div class="col border">
      2 of 3
    </div>
    <div class="col border">
      3 of 3
    </div>
  </div>
</div>

2.2 等宽多行（分栏符）

我们可以通过插入.w-100来创建跨越多行的等宽列。

<div class="container border">
   <div class="row border">
        <div class="col border">col</div>
        <div class="col border">col</div>
        <div class="w-100 border"></div>
        <div class="col border">col</div>
        <div class="col border">col</div>
    </div>
</div>

2.3 设置一行的宽度

自动布局意味着我们可以设置一列的宽度，并且同级列可以自动调整大小。

<!-- 用确定的标签大小来控制div -->
<div class="container border">
    <div class="row border">
        <div class="col border">1 of 3</div>
        <div class="col-6 border">2 of 3 (wider)</div>
        <div class="col border">3 of 3</div>
    </div>
    <div class="row border">
        <div class="col border">1 of 3</div>
        <div class="col-5 border">2 of 3 (wider)</div>
        <div class="col border">3 of 3</div>
    </div>
</div>

2.4 可变宽度内容

我们使用 col-{breakpoint}-auto可以使列的宽度随着内容的大小而变化。

<!-- 根据文本内容来控制容器大小 -->
<div class="container border">
     <div class="row justify-content-md-center border">
         <div class="col col-lg-2 border">1 of 3</div>
         <div class="col-md-auto border">Variable width content</div>
         <div class="col col-lg-2 border">3 of 3</div>
     </div>
     <div class="row border">
         <div class="col border">1 of 3</div>
         <div class="col-md-auto border">Variable width content</div>
         <div class="col col-lg-2 border">3 of 3</div>
     </div>
 </div>

3、响应式布局

Bootstrap的网格包括了五层预定义的类，用于构建复杂的响应式布局，可以给不同的设备设置想要的大小，包括超小型，小型，中型，大型，超大型等五种设备。

3.1 给容器设置大小

如果对每一种设备网格要求都是一样的话，请使用.col和.col-*来修饰容器，如果需要变化的话，请使用指定的编号的类别。

<!-- 保证容器在任何大小设备中都能一致，需要使用bootstrap中的类.col-* -->
<div class="container border">
    <div class="row border">
        <div class="col border">col</div>
        <div class="col border">col</div>
        <div class="col border">col</div>
        <div class="col border">col</div>
    </div>
    <div class="row border">
        <div class="col-8 border">col-8</div>
        <div class="col-4 border">col-4</div>
    </div>
</div>

3.2 在特定设备中容器堆叠至水平

例如：我们可以使用.col-sm-*类，而被设置的容器将在小设备时堆叠呈水平状态。

<!-- 使用.col-sm-*会使得容器在小设备时行从堆叠变成水平 -->
<div class="container border">
    <div class="row border">
        <div class="col-sm-8 border">col-sm-8</div>
        <div class="col-sm-4 border">col-sm-4</div>
    </div>
    <div class="row">
        <div class="col-sm border">col-sm</div>
        <div class="col-sm border">col-sm</div>
        <div class="col-sm border">col-sm</div>
    </div>
</div>

3.3 混合搭配

使列在不同的设备中呈现不同的样子，我们需要对他进行不同类的组合。

<!-- 不同类的组合 -->
<div class="container border">
    <div class="row border">
        <div class="col-md-8 border">col-md-8</div>
        <div class="col-6 col-md-4 border">col-6 col-md-4</div>
    </div>


    <div class="row border">
        <div class="col-6 col-md-4">col-6 col-md-4</div>
        <div class="col-6 col-md-4">col-6 col-md-4</div>
        <div class="col-6 col-md-4">col-6 col-md-4</div>
    </div>

    <!-- 列始终保持50%的宽度 -->
    <div class="row border">
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>
</div>

3.4 行列

我们可以通过设置 .row-cols-* 来快速设置想呈现的内容的列数。

<div class="container border">
    <div class="row row-cols-2 border">
        <div class="col border">Column</div>
        <div class="col border">Column</div>
        <div class="col border">Column</div>
        <div class="col border">Column</div>
    </div>
</div>

4、对齐

4.1 垂直对齐

我们使用.align-items-*类可以使我们的容器实现垂直对齐。

<!-- 垂直对齐 -->
<div class="container border">
    <div class="row align-items-start">
        <div class="col border">One of three columns</div>
        <div class="col border">Two of three columns</div>
        <div class="col border">Three of three columns</div>
    </div>
    <div class="row align-items-center">
        <div class="col border">One of three columns</div>
        <div class="col border">Two of three columns</div>
        <div class="col border">Three of three columns</div>
    </div>
    <div class="row align-items-end">
        <div class="col border">One of three columns</div>
        <div class="col border">Two of three columns</div>
        <div class="col border">Three of three columns</div>
    </div>
</div>

4.2 水平对齐

我们可以通过设置.justify-content-*类来改变在主轴上的对齐，也就是水平对齐。

扫描二维码关注公众号，回复： 11955331 查看本文章

<!-- 水平对齐 -->
<div class="container border">
    <div class="row justify-content-start border">
        <div class="col-4 border">One of two columns</div>
        <div class="col-4 border">One of two columns</div>
    </div>
    <div class="row justify-content-center border">
        <div class="col-4 border">One of two columns</div>
        <div class="col-4 border">One of two columns</div>
    </div>
    <div class="row justify-content-end border">
        <div class="col-4 border">One of two columns</div>
        <div class="col-4 border">One of two columns</div>
    </div>
    <div class="row justify-content-around border">
        <div class="col-4 border">One of two columns</div>
        <div class="col-4 border">One of two columns</div>
    </div>
    <div class="row justify-content-between border">
        <div class="col-4 border">One of two columns</div>
        <div class="col-4 border">One of two columns</div>
    </div>
</div>

4.3 No gutters

我们可以使用 .no-gutters 类来删除预定义网格中列之间的装订线。

<!-- No gutters -->
<div class="row no-gutters">
    <div class="col-sm-6 col-md-8 border">col-sm-6 col-md-8</div>
    <div class="col-6 col-md-4 border">col-6 col-md-4</div>
</div>

4.4 列包装

如果有一行中放置的列超过了12列，则每组额外的列将作为一个新单元包装至新行中。

<!-- Column wrapping -->
<div class="container border">
    <div class="row border">
        <div class="col-9 border">col-9</div>
        <div class="col-4 border">
            col-4<br/>
            since 9 + 4 = 13 &gt; 12, this 4-column-wid div gets wrapped onto a new line as one contigous unit.
        </div>
        <div class="col-6 border">
            col-6<br/>
            Subsequent columns continue along the new line.
        </div>
    </div>
</div>

5、重新排序

5.1 排列顺序

我们可以使用 .order-* 对项目进行可视化排序。

<!-- Order classes -->
<div class="container border">
    <div class="row border">
        <div class="col border">First in DOM, no order applied</div>
        <div class="col order-12 border">Second in DOM, with a larger order</div>
        <div class="col order-1 border">Thrid in DOM, with an order of 1</div>
    </div>
</div>

我们可以通过.order-first或.order-last来重置DOM中的顺序。

<div class="container border">
    <div class="row border">
        <div class="col order-last border">First in DOM, ordered last</div>
        <div class="col border">Second in DOM, uordered</div>
        <div class="col order-first border">Third in DOM, ordered first</div>
    </div>
</div>