Bootstrap栅格系统的使用详解

下面我来为您介绍一篇关于Bootstrap栅格系统使用的详细攻略。

1. 什么是Bootstrap栅格系统

Bootstrap 栅格系统是一个响应式、移动设备优先的流式格系统，它用于页面布局，具有以下特性：

• 支持多种设备（如手机、平板、桌面电脑）；
• 网格布局（12个网格列，通过媒体查询实现不同的排版）；
• 预定义好了多种布局类型（如：嵌套、等宽、偏移、反向布局）；
• 支持自定义样式。

2. Bootstrap栅格系统的基本使用

使用 Bootstrap 的栅格系统需要引入 Bootstrap 的 CSS 和 JS 文件，并遵循一定的 HTML 结构。

下面是一个基本的 Bootstrap 网格布局结构：

<div class="container">
  <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
</div>

其中：

• .container 用于包裹整个布局；
• .row 是行，用于包裹每一行的网格元素；
• .col-* 是列，用于包裹每一个网格元素，* 为网格元素的占比宽度，例如 .col-sm-4 表示网格元素占 4/12 的宽度，即占据整行的 1/3。

col-* 中的 * 有以下分类：

• .col-xs-*：针对手机设备 (<768px)；
• .col-sm-*：针对平板设备（≥768px）；
• .col-md-*：针对桌面电脑设备（≥992px）；
• .col-lg-*：针对大桌面电脑设备（≥1200px）。

示例 1：使用 .col-* 可以实现等宽排布的效果。

<div class="container">
  <div class="row">
    <div class="col-sm-6">1</div>
    <div class="col-sm-6">2</div>
  </div>
</div>

在这个例子中，.col-sm-6 表示两个网格元素占据了一行的整个宽度，它们的宽度相等。

示例 2：使用偏移可以对网格元素进行调整。

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

在这个例子中，.col-sm-offset-6 表示右侧的网格元素向右偏移了 6 个网格列的宽度，使它紧贴着容器的右边缘。

3. Bootstrap栅格系统的高级应用

Bootstrap 的栅格系统还可以进行更加复杂的布局设置，下面介绍两个高级应用场景：

3.1. 嵌套布局

我们可以将一个 col--n 的元素再嵌套一个 row，这时该 row 的 col--n 的元素宽度都是基于包含它的那个元素的宽度的，而不是整行。

示例：

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="row">
        <div class="col-sm-9">1</div>
        <div class="col-sm-3">2</div>
      </div>
    </div>
  </div>
</div>

在这个例子中，.col-sm-9 和 .col-sm-3 在内部嵌套的 .row 中，此时它们的大小都是基于包含它们的外层 .col-sm-12 的大小来计算的。

3.2. 反向布局

除了正常的布局顺序，Bootstrap 如何改变布局顺序呢？

通过添加 .flex-*-reverse 类可以反转布局顺序。

示例：

<div class="container">
  <div class="row">
    <div class="col-sm-6">1</div>
    <div class="col-sm-6 flex-sm-last">2</div>
  </div>
</div>

在这个例子中，.flex-sm-last 表示右侧的网格元素在平板设备下排在左侧，这是因为 .flex-sm-last 会在 .col-sm-6 上添加一个 flex-last 类，反转了布局顺序。在这个例子中，2 元素实际上是在 HTML 中写在 1 元素后面的。