Bootstrap-5-Common-Components-Navbar-Cards-Modals

组件 CSS Bootstrap 导航栏卡片模态框

字数统计: 3.7k阅读时长: 17 min

 2026/07/29 

第32课：Bootstrap 5 常用组件——导航栏、卡片、按钮、模态框、下拉菜单

Bootstrap 5 提供了大量预制的 UI 组件，这些组件基于 JavaScript 插件和 CSS 类构建，能快速搭建出功能齐全、样式一致、响应式的界面。本节课将详细介绍五个最常用的核心组件：导航栏、卡片、按钮、模态框和下拉菜单。我们将逐一拆解每个组件的 HTML 结构、关键 CSS 类、JavaScript 交互行为以及自定义选项，并结合实际场景给出完整可运行示例。

导航栏是网站顶部最重要的导航元素，Bootstrap 的 .navbar 组件内置了响应式折叠、品牌区、导航链接、表单、文本等功能。

1.1 基础结构

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</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`	声明为导航栏基础容器，内部默认 `flex` 布局。
`.navbar-expand-{breakpoint}`	在该断点及以上时展开导航栏，低于该断点时折叠为汉堡菜单。`lg` 是最常用断点。
`.navbar-light` / `.navbar-dark`	设置导航栏的文本颜色主题，配合 `.bg-*` 背景色使用。`light` 用于浅色背景，`dark` 用于深色背景。
`.navbar-brand`	品牌/Logo 区域，通常是一个链接。
`.navbar-toggler`	折叠按钮（汉堡图标），通过 `data-bs-toggle="collapse"` 控制 `.navbar-collapse` 的显示/隐藏。
`.navbar-collapse`	折叠区域，包含导航链接和其他内容。其 `id` 需要与按钮的 `data-bs-target` 对应。
`.navbar-nav`	导航链接的 `<ul>` 包装，自动将链接排列为垂直（移动端）或水平（展开后）。

1.2 导航栏内嵌其他元素

导航栏支持放置表单、下拉菜单、文本、按钮等。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Admin</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link" href="#">仪表板</a></li>
        <li class="nav-item"><a class="nav-link" href="#">订单</a></li>
      </ul>
      <!-- 搜索表单 -->
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="搜索">
        <button class="btn btn-outline-success" type="submit">搜索</button>
      </form>
    </div>
  </div>
</nav>

要点：

me-auto 将导航链接推到左侧，后面的搜索表单自动靠右。
表单使用 d-flex 保持水平排列。

1.3 固定导航栏

让导航栏固定在视口顶部，不随页面滚动。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <!-- 内容 -->
</nav>
<!-- body 需要补偿导航栏高度 -->
<body style="padding-top: 70px;">

fixed-top：固定在顶部。
fixed-bottom：固定在底部。
sticky-top：滚动到该位置后固定。

2. 卡片（Card）

卡片是 Bootstrap 中最灵活的内容容器，可组合出产品展示、用户资料、文章摘要等 UI 模式。

2.1 基础卡片结构

<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>

卡片子组件：

类名	作用
`.card`	卡片容器，设置背景、边框、圆角。
`.card-img-top`	卡片顶部图片，圆角适配。
`.card-body`	卡片主体内容区，提供内边距。
`.card-title`	标题样式。
`.card-text`	文本样式。
`.card-footer`	卡片底部（如状态、时间戳）。
`.card-header`	卡片头部（如标签页导航）。

2.2 卡片排列：使用栅格 + 卡片

将卡片放置在栅格列中，可实现响应式卡片网格。

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片 1</h5>
        <p class="card-text">描述。</p>
      </div>
    </div>
  </div>
  <!-- 更多 .col -->
</div>

h-100 使卡片在同行内保持等高。
row-cols-* 控制每行列数。

2.3 卡片布局变体

水平卡片：.card 内添加 .row.g-0，将图片和 card-body 并排。
卡片叠加图：使用 .card-img-overlay 将文字覆盖在图片上。
彩色卡片：用 .bg-primary、.text-white 等背景/文本工具类。

3. 按钮（Button）与按钮组

3.1 按钮变体

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-light">浅色</button>
<button class="btn btn-dark">深色</button>
<button class="btn btn-link">链接式</button>

轮廓按钮：.btn-outline-{color}（如 .btn-outline-primary），背景透明，边框和文字有颜色。

尺寸：.btn-lg（大）、.btn-sm（小）。

状态：active（激活）、disabled（禁用）。

3.2 按钮组

将多个按钮视觉上合并为一组。

<div class="btn-group" role="group">
  <button class="btn btn-primary">左</button>
  <button class="btn btn-primary">中</button>
  <button class="btn btn-primary">右</button>
</div>

.btn-group 使按钮紧密排列，无圆角间隙。
.btn-group-vertical 垂直排列。

模态框是覆盖在页面上的对话框，用于展示内容、收集输入或确认操作。Bootstrap 的模态框通过 JavaScript 控制显示/隐藏，支持动画、背景遮罩和键盘关闭。

4.1 基础结构

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态框
</button>

<!-- 模态框结构 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        这里是模态框的内容。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

关键类/属性：

元素	说明
`.modal`	模态框容器。`fade` 类添加过渡动画。
`data-bs-toggle="modal"`	触发按钮上的属性，声明它控制一个模态框。
`data-bs-target="#id"`	指向模态框的 `id`。
`.modal-dialog`	对话框定位和宽度。
`.modal-content`	对话框内容（背景、阴影、圆角）。
`.modal-header` / `.modal-body` / `.modal-footer`	头部/主体/底部区域。
`data-bs-dismiss="modal"`	关闭模态框的按钮或元素。

4.2 模态框选项

尺寸：在 .modal-dialog 上添加 .modal-sm（小）、.modal-lg（大）、.modal-xl（超大）。
垂直居中：.modal-dialog-centered。
静态背景：.modal 上设置 data-bs-backdrop="static" data-bs-keyboard="false"，禁止点击背景和按 Esc 关闭，用于必须处理的对话框。
滚动长内容：.modal-dialog-scrollable 使内容区可滚动。

4.3 通过 JavaScript 控制

const myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.show();   // 显示
myModal.hide();   // 隐藏
myModal.toggle(); // 切换

// 事件监听
document.getElementById('exampleModal').addEventListener('shown.bs.modal', () => {
  console.log('模态框完全显示');
});

下拉菜单是切换式菜单，用于显示链接列表或更多操作。Bootstrap 的下拉菜单基于 Popper.js（Bootstrap 5 内置依赖）实现定位和翻转。

5.1 基础结构

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    操作
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">编辑</a></li>
    <li><a class="dropdown-item" href="#">复制</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item text-danger" href="#">删除</a></li>
  </ul>
</div>

关键类：

类名/属性	作用
`.dropdown`	相对定位的容器。
`data-bs-toggle="dropdown"`	触发下拉切换。
`.dropdown-menu`	下拉菜单列表，默认隐藏，点击触发后显示。
`.dropdown-item`	菜单项（可以是链接或按钮）。
`.dropdown-divider`	分割线。
`.dropdown-header`	菜单分组标题（非可选项）。
`.dropend` / `.dropstart`	替代 `.dropdown`，使菜单向右或向左展开（二级菜单）。
`.dropup`	向上展开菜单。

5.2 对齐与方向

右对齐：.dropdown-menu-end，将菜单相对于按钮右对齐（默认左对齐）。
自动翻转：Bootstrap 5 默认启用 Popper 的翻转行为，菜单会在空间不足时自动改变方向。

5.3 分割按钮（Split Button）

将按钮分为主操作和下拉箭头两部分。

<div class="btn-group">
  <button type="button" class="btn btn-primary">保存</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
    <span class="visually-hidden">切换下拉</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">保存并发布</a></li>
    <li><a class="dropdown-item" href="#">保存为草稿</a></li>
  </ul>
</div>

课后练习

一、概念自测（选择题 / 填空题）

（单选） 要使 Bootstrap 导航栏在平板（≥768px）及以上展开，移动端折叠，应使用以下哪个类？
A. navbar-expand-sm
B. navbar-expand-md
C. navbar-expand-lg
D. navbar-expand
（单选） 模态框默认不显示，需要点击触发按钮才出现。以下哪个属性用于将按钮与模态框关联？
A. data-bs-dismiss="modal"
B. data-bs-toggle="modal"
C. data-bs-target="#modalId"
D. 以上都是，B 和 C 分别用于触发和指向。
（填空） 要使模态框垂直居中显示，需在 .modal-dialog 上添加类 ______。
（多选） 以下哪些是 Bootstrap 5 卡片组件可用的子组件？
A. .card-header
B. .card-footer
C. .card-img-top
D. .card-list

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要使用 Bootstrap 5 创建一个包含以下组件的页面：

一个固定在顶部的导航栏（深色背景），品牌名“TaskManager”，包含“仪表板”、“任务”、“日历”三个链接。
下方主体区使用 .container，内部有一个“新建任务”按钮，点击后弹出模态框。
模态框标题为“新建任务”，内部有一个表单（任务标题输入框、优先级下拉选择、任务描述文本域），底部有“取消”和“创建”按钮。
任务以卡片形式展示：使用栅格排列（移动端1列，平板2列，桌面3列），每张卡片含标题、描述、优先级徽章（badge）和一个下拉菜单（编辑、删除）。
样式全部使用 Bootstrap 5 类，不写自定义 CSS。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的完整 HTML 文件。提示词中需明确指定每个 Bootstrap 组件的结构（导航栏、模态框、卡片、下拉菜单），以及栅格断点。

课后练习答案

一、概念自测答案

B
- 解析：md 断点对应 ≥768px（平板）。sm 是 ≥576px，lg 是 ≥992px。
D
- 解析：触发按钮需要 data-bs-toggle="modal" 和 data-bs-target="#modalId" 同时使用。
modal-dialog-centered
- 解析：该类可使模态框在视口中垂直居中。
A、B、C
- 解析：card-header、card-footer、card-img-top 均为官方卡片子组件。card-list 不是。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请使用 Bootstrap 5 CDN 生成一个任务管理页面。要求：

导航栏：<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">，品牌名 ‘TaskManager’，三个链接（仪表板、任务、日历）。

主体 <div class="container mt-5 pt-3">（补偿固定导航栏高度）。

一个 ‘新建任务’ 按钮，data-bs-toggle="modal" data-bs-target="#taskModal"。

模态框 id="taskModal"：标题 ‘新建任务’，包含输入框 ‘任务标题’、下拉选择 ‘优先级’（高/中/低）、文本域 ‘描述’。底部 ‘取消’（data-bs-dismiss="modal"）和 ‘创建’ 按钮。

任务卡片：使用 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"> 包裹三张卡片。每张卡片 <div class="col"><div class="card h-100">，包含 card-body，标题、描述文本、一个 <span class="badge bg-warning">中</span> 优先级徽章，以及一个下拉菜单（<div class="dropdown">），包含编辑和删除选项。

不使用任何自定义 CSS，全部基于 Bootstrap 类。代码整洁，注释清晰。直接输出完整 HTML 文件。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/29/Bootstrap-5-Common/

发表日期：July 29th 2026, 2:00:00 am

更新日期：July 28th 2026, 10:27:15 am

Next Post

Bootstrap-5-Customization-and-Theming
Previous Post

Bootstrap-5-Grid-System-and-Responsive-Tools

CATALOG

1. 第32课：Bootstrap 5 常用组件——导航栏、卡片、按钮、模态框、下拉菜单