Bootstrap 5 框架：栅格、组件与实用工具

Bootstrap 5 概览

Bootstrap 5 是目前最流行的前端开源工具包，用于快速构建响应式、移动设备优先的网站。相较于 Bootstrap 4，它全面弃用了 jQuery，转而使用原生 JavaScript，并对栅格系统、组件样式和实用工具类进行了大幅优化。本教程将聚焦于其三大核心支柱：栅格系统、组件和实用工具，帮助你快速上手并高效开发。

栅格系统

栅格系统是 Bootstrap 响应式布局的基石。它基于 12 列布局，通过行（.row）和列（.col）的组合，可以轻松创建适配不同屏幕尺寸的页面结构。

基础结构

栅格必须放置在以下三种容器之一中：

• .container：固定宽度并随断点变化的容器。
• .container-fluid：始终占据 100% 宽度的容器。
• .container-{breakpoint}：在指定断点之前为流体宽度，之后为固定宽度的容器。

一个基本的栅格布局由容器、行、列三部分组成：

<div class="container">
  <div class="row">
    <div class="col">
      等宽列 1
    </div>
    <div class="col">
      等宽列 2
    </div>
  </div>
</div>

列的自动布局与宽度指定

Bootstrap 列可以通过数字指定占用列数，也可以不指定数字实现自动平分宽度。

• 等宽列：所有 .col 将自动均分行的宽度。
• 指定列宽：如 .col-8 占用 8 列，.col-4 占用 4 列。

<div class="row">
  <div class="col">自动 1</div>
  <div class="col-6">占据 6 列</div>
  <div class="col">自动 2</div>
</div>

响应式断点

Bootstrap 5 定义了六个响应式断点，对应不同的屏幕宽度。列类支持在每个断点处指定不同的行为，格式为 .col-{breakpoint}-{number}。

代码示例：在手机上一列堆叠，在平板以上等分两列。

<div class="row">
  <div class="col-12 col-md-6">左侧内容</div>
  <div class="col-12 col-md-6">右侧内容</div>
</div>

列的对齐与排序

通过行级别的对齐类或列自身的对齐类，可以轻松控制垂直和水平排列。此外，使用 .order-* 系列工具可以无需修改 HTML 结构就调整视觉顺序。

<div class="row align-items-center">
  <div class="col order-2 order-md-1">第一但在小屏显示在第二</div>
  <div class="col order-1 order-md-2">第二但在小屏显示在第一</div>
</div>

核心组件

Bootstrap 5 提供了大量预构建的 UI 组件，本节选取最常用的组件进行讲解。所有组件均采用类驱动，引入相应 CSS 和 JS 即可工作。

导航栏（Navbar）

导航栏是网站导航的核心容器。Bootstrap 5 的 Navbar 默认是响应式的，且支持多种配色方案。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌名</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
        <li class="nav-item"><a class="nav-link" href="#">特性</a></li>
        <li class="nav-item"><a class="nav-link" href="#">定价</a></li>
      </ul>
    </div>
  </div>
</nav>

关键类说明：

• .navbar-expand-lg：在 lg 断点以上展示完整导航，以下则折叠为汉堡菜单。
• .navbar-light / .navbar-dark：配合 .bg-light 或 .bg-dark 定义文字和背景色方案。
• 折叠按钮需要 data-bs-toggle="collapse" 和 data-bs-target 指向菜单容器。

卡片（Card）

卡片是内容容器，适用于博客摘要、产品展示等场景。它支持页眉、页脚、图片、按钮群组。

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这是一些示例文字，展示卡片的内容区域。</p>
    <a href="#" class="btn btn-primary">详情</a>
  </div>
</div>

按钮（Button）

按钮组件通过 .btn 基础类与 .btn-{context} 变体实现不同语义的样式。

<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-outline-success">轮廓成功按钮</button>
<a href="#" class="btn btn-link">链接式按钮</a>

上下文类别包括：primary, secondary, success, danger, warning, info, light, dark。添加 .btn-lg 或 .btn-sm 可调整尺寸。

表单（Form）

表单控件已为响应式和可访问性进行了优化，标签与输入框需搭配使用。

<div class="mb-3">
  <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleSelect" class="form-label">选择选项</label>
  <select class="form-select" id="exampleSelect">
    <option selected>打开菜单选择</option>
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
  </select>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    同意条款
  </label>
</div>

实用工具类

实用工具类是 Bootstrap 5 最强大的生产力工具。它们都是一些单一的、可组合的小类，让你无需手写 CSS 就能快速调整间距、颜色、边框、 Flexbox 布局等。

间距（Spacing）

格式为 {property}{sides}-{size}，应用于 margin 或 padding。

• Property: m 代表 margin，p 代表 padding。
• Sides: t (上), b (下), s (左, start), e (右, end), x (水平), y (垂直), 留空表示四边。
• Size: 0 (0), 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem), auto。

<div class="p-3 mb-4 bg-light">内边距 1rem，下外边距 1.5rem</div>
<div class="mx-auto w-50 bg-secondary text-white p-2">水平居中定宽块</div>

颜色与背景

文本颜色使用 .text-{context}，背景色使用 .bg-{context}。上下文同按钮的语义色。

<p class="text-primary">主色文字</p>
<span class="badge bg-danger">危险徽章</span>

边框与圆角

通过添加 .border 获得基本边框，配合 .border-{side}、.border-{width} 和 .rounded-{size} 精细控制。

<div class="p-3 mb-2 border border-primary rounded-3">
  带主色边框和大圆角的盒子
</div>
<div class="p-3 mb-2 border-top border-4 rounded-circle d-inline-block">
  仅顶部粗边框，圆形显示
</div>

Flex 布局快捷工具

只需在父元素上添加 .d-flex，然后结合对齐和排列工具，即可完成弹性盒布局。

<div class="d-flex justify-content-between align-items-center bg-light p-3">
  <div>左侧</div>
  <div>中间</div>
  <div>右侧</div>
</div>
<div class="d-flex flex-column flex-md-row mt-3">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-info">弹性项目 2</div>
</div>

常用类：.flex-row / .flex-column, .justify-content-*, .align-items-*, .flex-wrap 等。

显示与位置

• .d-{value}：控制元素显示，如 .d-none, .d-md-block。
• .position-relative, .position-absolute 等快速定位，配合 .top-0, .start-50, .translate-middle 等实现居中。

<div class="position-relative bg-dark text-white" style="height:100px;">
  <div class="position-absolute top-50 start-50 translate-middle">
    绝对居中文本
  </div>
</div>

整合实践：响应式卡片网格

下面通过一个综合实例，将栅格、卡片组件和间距、Flex 工具结合起来，构建一个常见的产品展示区。

<div class="container my-5">
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    <div class="col">
      <div class="card h-100 shadow-sm">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title">产品名称</h5>
          <p class="card-text">简要描述。</p>
          <a href="#" class="btn btn-outline-primary mt-auto">查看详情</a>
        </div>
      </div>
    </div>
    <!-- 重复 .col 即可添加更多卡片 -->
  </div>
</div>

代码亮点解析：

• .row-cols-* 系列快速定义每行列数，无需在每个列上写断点类。
• .g-4 用于设置行与列之间的间距（gutters），值从 0 到 5。
• .h-100 让同一行卡片高度一致；.mt-auto 将按钮推至底部。
• .shadow-sm 实用工具添加了细微阴影。

小结

Bootstrap 5 通过直观的栅格系统、丰富的预制组件和海量的实用工具类，极大降低了前端开发的复杂度。掌握这些核心概念后，你可以快速搭建出专业、响应式的界面原型。建议下一步实践：尝试组合不同组件，并利用工具类微调，逐步加深对框架的整体理解。