Bootstrap: 轮播与模态框

Q: 轮播的图片尺寸不一致怎么办？

有两种方案：(1) 使用固定尺寸的图片（推荐用统一比例如 16:9 裁剪）；(2) 用 object-fit: cover 配合 height 固定轮播高度。

Q: 模态框打开后背景能滚动吗？

默认不能——模态框打开时 body 的 overflow 被设为 hidden 。如需允许滚动给 modal-dialog 加 modal-dialog-scrollable 。

Q: 轮播在手机上支持滑动切换吗？

支持。Bootstrap 5 的轮播默认启用了触摸事件（ data-bs-touch="true" ），在移动设备上可以通过左右滑动手指切换幻灯片，无需额外配置。

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

第 13 课：表单与表单验证

(2) 🎯 你将学到

构建轮播图（carousel）并配置自动播放
使用指示器、前后箭头和标题增强轮播
构建模态框（modal）并控制打开/关闭
使用模态框尺寸变体和垂直居中
在模态框中嵌入表单和轮播

(3) 痛点

Alice 的产品详情页需要图片轮播展示商品多角度照片，以及点击"快速查看"弹出产品详情模态框——两个组件配合，用户体验专业且无需手写 JS。

(4) 解法

轮播和模态框是 Bootstrap 中两个最常用的 JavaScript 交互组件。轮播用于循环展示图片或内容，模态框用于弹出对话框、表单或确认信息。

(5) 收益

使用轮播和模态框配合，无需手写 JavaScript 即可实现专业的产品展示效果。

2. 轮播图

▶ 示例：基础轮播

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">

      <div class="carousel-indicators">
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2"></button>
      </div>

      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400/0d6efd/fff?text=Slide+1" class="d-block w-100" alt="Slide 1">
          <div class="carousel-caption d-none d-md-block">
            <h5>First Slide</h5>
            <p>Welcome to Bootstrap Carousel.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/198754/fff?text=Slide+2" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/dc3545/fff?text=Slide+3" class="d-block w-100" alt="Slide 3">
        </div>
      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#demoCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ 试一试

(1) 轮播组件结构

元素	class/data-*	说明
容器	`carousel slide`	轮播容器，id 供绑定
指示器	`carousel-indicators`	底部圆点，点击跳转
幻灯片容器	`carousel-inner`	包裹所有 slide
单张幻灯片	`carousel-item`	每张内容
活动幻灯片	`carousel-item active`	当前显示的
标题	`carousel-caption`	图片上叠加文字

(2) 轮播配置

HTML

<!-- Auto-play every 2 seconds (default: 5000ms) -->
<div id="carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">

<!-- Fade transition instead of slide -->
<div id="carousel" class="carousel slide carousel-fade">

▶ 试一试

3. 模态框

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch Demo Modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">Modal Title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>This is the modal body content. You can put any HTML here.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

▶ 试一试

(1) 模态框结构

元素	class	说明
遮罩	`modal fade`	半透明背景遮罩
对话框	`modal-dialog`	控制尺寸和垂直居中
内容	`modal-content`	白色面板容器
头部	`modal-header`	标题 + 关闭按钮
主体	`modal-body`	主要内容区域
底部	`modal-footer`	操作按钮组

4. 模态框尺寸与对齐

HTML

<div class="modal-dialog modal-sm">Small</div>
<div class="modal-dialog modal-lg">Large</div>
<div class="modal-dialog modal-xl">Extra large</div>
<div class="modal-dialog modal-dialog-centered">Vertically centered</div>
<div class="modal-dialog modal-dialog-scrollable">Scrollable body</div>
<div class="modal-dialog modal-fullscreen-md-down">Full screen on mobile</div>

▶ 试一试

class	宽度	场景
`modal-sm`	300px	确认对话框
默认	500px	通用表单
`modal-lg`	800px	大表单
`modal-xl`	1140px	全尺寸内容
`modal-fullscreen`	100vw	移动端全屏

5. 更多轮播与模态框示例

▶ 示例：带标题和指示器的产品轮播

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Carousel</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div id="productCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3000">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400/0d6efd/fff?text=iPhone+15" class="d-block w-100" alt="Product 1">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>iPhone 15 Pro</h5>
            <p>Starting at $999 — A17 Pro chip, titanium design.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/198754/fff?text=MacBook+Air" class="d-block w-100" alt="Product 2">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>MacBook Air M3</h5>
            <p>Lightweight power — 18hr battery, 15-inch display.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/dc3545/fff?text=AirPods+Pro" class="d-block w-100" alt="Product 3">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>AirPods Pro 2</h5>
            <p>Adaptive audio, noise cancellation, USB-C.</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ 试一试

▶ 示例：模态框内嵌表单

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#feedbackModal">
  Leave Feedback
</button>

<div class="modal fade" id="feedbackModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Send Feedback</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label class="form-label">Your Name</label>
            <input type="text" class="form-control" placeholder="Enter name">
          </div>
          <div class="mb-3">
            <label class="form-label">Rating</label>
            <select class="form-select">
              <option selected>5 - Excellent</option>
              <option>4 - Good</option>
              <option>3 - Average</option>
              <option>2 - Poor</option>
              <option>1 - Terrible</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Message</label>
            <textarea class="form-control" rows="3" placeholder="Tell us about your experience..."></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>

▶ 试一试

▶ 示例：模态框内嵌轮播

HTML

<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#carouselModal">
  View Gallery
</button>

<div class="modal fade" id="carouselModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Product Gallery</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://via.placeholder.com/800x500/0d6efd/fff?text=Photo+1" class="d-block w-100" alt="Photo 1">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/800x500/198754/fff?text=Photo+2" class="d-block w-100" alt="Photo 2">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/800x500/dc3545/fff?text=Photo+3" class="d-block w-100" alt="Photo 3">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

▶ 试一试

▶ 示例：静态背景模态框

HTML

<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#staticModal">
  Open with Static Backdrop
</button>

<div class="modal fade" id="staticModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content text-center">
      <div class="modal-body py-4">
        <div class="display-6 text-warning mb-3">⚠️</div>
        <h5>Delete Account?</h5>
        <p class="text-muted small">This action cannot be undone.</p>
        <div class="d-grid gap-2">
          <button class="btn btn-danger">Confirm Delete</button>
          <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

▶ 试一试

(1) 轮播-模态框交互流程

flowchart TD
    subgraph 轮播
        A[carousel slide] --> B[carousel-indicators 指示器]
        A --> C[carousel-inner 幻灯片容器]
        C --> D[carousel-item active 当前幻灯片]
        C --> E[carousel-item 其他幻灯片]
        A --> F[carousel-control-prev/next 前后箭头]
        D --> G[carousel-caption 标题]
    end
    subgraph 模态框
        H[modal fade 遮罩] --> I[modal-dialog 对话框]
        I --> J[modal-content 内容面板]
        J --> K[modal-header 头部]
        J --> L[modal-body 主体]
        J --> M[modal-footer 底部]
    end
    N[用户点击] --> O{目标}
    O -->|轮播指示器| B
    O -->|轮播箭头| F
    O -->|打开按钮| H
    O -->|关闭按钮| K

data-bs-* 属性	作用对象	可选值
`data-bs-ride="carousel"`	轮播容器	`carousel` / `false`
`data-bs-interval`	轮播容器	毫秒数（默认 5000）
`data-bs-slide-to`	指示器按钮	索引号（0,1,2...）
`data-bs-slide`	控制按钮	`prev` / `next`
`data-bs-toggle="modal"`	触发元素	`modal`
`data-bs-target="#id"`	触发元素	目标模态框 ID
`data-bs-dismiss="modal"`	关闭按钮	`modal`
`data-bs-backdrop`	模态框	`true` / `false` / `static`
`data-bs-keyboard`	模态框	`true` / `false`
`data-bs-touch`	轮播容器	`true` / `false`

轮播配置选项	data 属性	效果说明
自动播放	`data-bs-ride="carousel"`	页面加载后自动轮播
切换间隔	`data-bs-interval="2000"`	每 2 秒切换一次
渐隐过渡	class `carousel-fade`	淡入淡出而非滑动
暂停悬停	`data-bs-pause="hover"`	鼠标悬停时暂停
触摸滑动	`data-bs-touch="true"`	移动端手势滑动
循环播放	`data-bs-wrap="true"`	最后一页后回到第一页

模态框尺寸	class	宽度	适用场景
小	`modal-sm`	300px	确认框、简短提示
默认	无	500px	表单、信息展示
大	`modal-lg`	800px	大表单、数据表格
超大	`modal-xl`	1140px	全尺寸内容面板
全屏	`modal-fullscreen`	100vw	移动端沉浸式

❓ 常见问题

Q 轮播的图片尺寸不一致怎么办？

A 有两种方案：(1) 使用固定尺寸的图片（推荐用统一比例如 16:9 裁剪）；(2) 用 object-fit: cover 配合 height 固定轮播高度。

Q 模态框打开后背景能滚动吗？

A 默认不能——模态框打开时 body 的 overflow 被设为 hidden。如需允许滚动给 modal-dialog 加 modal-dialog-scrollable。

Q 模态框可以嵌套吗？

A Bootstrap 不支持模态框嵌套。同时只显示一个模态框。但可以在一个模态框关闭后用 JS 打开另一个。

Q 轮播支持键盘控制吗？

A 支持。当焦点在轮播上时，键盘左右箭头切换幻灯片，默认启用。

Q 轮播在手机上支持滑动切换吗？

A 支持。Bootstrap 5 的轮播默认启用了触摸事件（data-bs-touch="true"），在移动设备上可以通过左右滑动手指切换幻灯片，无需额外配置。

📖 小节

轮播结构：carousel slide > carousel-inner > carousel-item active，配指示器和前后箭头
data-bs-ride="carousel" 自动播放，carousel-fade 渐隐过渡
模态框：modal fade > modal-dialog > modal-content（header + body + footer）
模态框尺寸：modal-sm/modal-lg/modal-xl/modal-fullscreen
两者都通过 data-bs-* 属性驱动，Bootstrap JS 必须引入

📝 作业

⭐ 创建一个产品展示轮播：3 张产品图片 + 标题说明（carousel-caption）+ 指示器 + 前后箭头，每 3 秒自动切换。
⭐⭐ 实现一个"快速查看"功能：产品卡片上的按钮点击后打开模态框，模态框内显示产品大图、名称、价格、描述和购买按钮。
⭐⭐⭐ 创建一个全屏模态框（在手机上），包含一个注册表单（姓名 + 邮箱 + 密码）。

上一课： 表单 · 下一课： 提示组件

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

Bootstrap: 轮播与模态框

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

(4) 解法

(5) 收益

2. 轮播图

▶ 示例：基础轮播

(1) 轮播组件结构

(2) 轮播配置

3. 模态框

(1) 模态框结构

4. 模态框尺寸与对齐

5. 更多轮播与模态框示例

▶ 示例：带标题和指示器的产品轮播

▶ 示例：模态框内嵌表单

▶ 示例：模态框内嵌轮播

▶ 示例：静态背景模态框

(1) 轮播-模态框交互流程

❓ 常见问题

📖 小节

📝 作业

🙏 帮我们做得更好