Bootstrap5 信息提示框（手把手讲解）

什么是 Bootstrap5 信息提示框？

在网页开发中，我们经常需要向用户传递一些关键信息，比如“提交成功”“密码不匹配”或“请输入邮箱地址”。这些提示信息虽然简单，但对用户体验至关重要。Bootstrap5 提供了一套优雅且功能丰富的组件系统，其中“信息提示框”就是最常用、最实用的交互元素之一。

Bootstrap5 信息提示框（Toast）本质上是一个轻量级、非模态的提示组件。它不会打断用户当前操作，而是从屏幕边缘悄然弹出，几秒后自动消失，就像手机收到一条通知一样自然。这种设计既不会干扰用户流程，又能有效传递信息。

想象一下，你在填写一个表单，提交后页面没有反应，你会不会怀疑“是不是没提交成功？”但如果你看到一个从右下角滑出的小弹窗，显示“提交成功”，是不是瞬间安心了？这就是 Bootstrap5 信息提示框的魅力所在。

它不依赖 JavaScript 框架，原生支持 HTML、CSS 和 JavaScript，适配所有现代浏览器，而且可以轻松自定义样式、位置和动画效果。无论是表单验证反馈、系统状态提醒，还是用户操作确认，它都能胜任。

如何在项目中引入 Bootstrap5 信息提示框

要使用 Bootstrap5 信息提示框，第一步是将 Bootstrap5 的 CSS 和 JS 文件引入你的项目。如果你是初学者，建议通过 CDN 方式快速集成，这样无需本地安装，几分钟就能跑起来。

在 HTML 文件的 <head> 标签内加入以下代码：

<!-- 引入 Bootstrap5 的 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

接着，在页面的底部（</body> 之前）添加 JavaScript 文件：

<!-- 引入 Bootstrap5 的 JS 文件（包含所有组件） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

注意：bootstrap.bundle.min.js 已经包含了所有 Bootstrap 组件所需的 JavaScript，包括信息提示框，所以你不需要额外引入 bootstrap.min.js 和 popper.min.js。

引入完成后，你就可以开始编写信息提示框的 HTML 结构了。一个基础的提示框由一个 <div> 容器构成，其类名为 toast，并包含 toast-header 和 toast-body 两个子元素，分别用于标题和内容区域。

创建基础的 Bootstrap5 信息提示框

下面是一个最简单的信息提示框示例，它将在页面加载后自动显示：

<!-- 信息提示框容器 -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <!-- 提示框头部 -->
  <div class="toast-header">
    <!-- 图标（可选） -->
    <img src="https://via.placeholder.com/20" class="rounded me-2" alt="Icon">
    <!-- 标题 -->
    <strong class="me-auto">系统通知</strong>
    <!-- 关闭按钮 -->
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
  </div>
  <!-- 提示框主体内容 -->
  <div class="toast-body">
    您的订单已成功提交，预计 24 小时内发货。
  </div>
</div>

代码详解：

class="toast"：这是信息提示框的核心类，Bootstrap 会根据这个类应用默认样式和动画。
role="alert"：为屏幕阅读器提供语义化支持，告诉辅助技术这是一个“警告”类信息。
aria-live="assertive"：表示该区域内容是“即时重要”的，屏幕阅读器会立即播报。
aria-atomic="true"：确保内容变化时，屏幕阅读器能完整读出新内容。
toast-header：包含标题和关闭按钮的头部区域，通常用于显示时间或图标。
img 标签：可选的图标，用于增强视觉识别。
btn-close：关闭按钮，点击后会隐藏提示框。
data-bs-dismiss="toast"：这是 Bootstrap 的数据属性，用于触发关闭行为。
toast-body：提示框的核心内容区域，放置你想显示的文本。

这个提示框现在还不会自动出现，你需要通过 JavaScript 手动触发它。

使用 JavaScript 控制信息提示框的显示

Bootstrap5 信息提示框的显示和隐藏完全由 JavaScript 控制。你需要先获取提示框的 DOM 元素，然后调用 toast() 方法创建实例，再调用 show() 方法显示。

// 获取提示框元素
const toastElement = document.querySelector('.toast');

// 创建 Toast 实例
const toast = new bootstrap.Toast(toastElement);

// 显示提示框
toast.show();

代码详解：

document.querySelector('.toast')：选择页面中 class 为 toast 的第一个元素。
new bootstrap.Toast()：这是 Bootstrap 提供的构造函数，用于初始化一个信息提示框实例。
toast.show()：调用此方法后，提示框会从右下角滑入并显示。

你也可以在页面加载完成后自动触发，例如使用 window.onload：

window.onload = function () {
  const toastElement = document.querySelector('.toast');
  const toast = new bootstrap.Toast(toastElement);
  toast.show();
};

这样，当页面完全加载后，信息提示框就会自动弹出。你甚至可以把它放在表单提交成功后的回调函数里，实现“提交成功”提示。

自定义信息提示框的样式与位置

Bootstrap5 信息提示框不仅功能强大，还支持高度自定义。你可以通过添加不同的类来改变它的颜色、位置和动画效果。

改变提示框颜色

Bootstrap 提供了多种颜色变体，只需在 toast 类上添加对应的颜色类即可：

<!-- 成功提示 -->
<div class="toast bg-success text-white">
  <div class="toast-header">
    <strong class="me-auto">操作成功</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
  </div>
  <div class="toast-body">
    数据保存成功。
  </div>
</div>

<!-- 警告提示 -->
<div class="toast bg-warning text-dark">
  <div class="toast-header">
    <strong class="me-auto">注意</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
  </div>
  <div class="toast-body">
    您的账户余额不足。
  </div>
</div>

颜色类包括：bg-primary、bg-secondary、bg-success、bg-danger、bg-warning、bg-info、bg-light、bg-dark 等。

改变提示框位置

默认情况下，提示框从右下角弹出。你也可以通过添加 position-absolute 和定位类来改变位置：

<!-- 从左上角弹出 -->
<div class="toast position-absolute top-0 start-0 m-3" style="width: 300px;">
  <div class="toast-header">
    <strong class="me-auto">顶部提示</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
  </div>
  <div class="toast-body">
    这是一个位于左上角的提示框。
  </div>
</div>

position-absolute 让提示框脱离文档流，top-0 start-0 控制其位置，m-3 添加外边距避免贴边。

自定义延迟与关闭行为

你还可以通过 data-bs-delay 属性控制提示框自动关闭的时间（单位：毫秒）：

<div class="toast" data-bs-delay="3000" data-bs-autohide="true">
  <div class="toast-header">
    <strong class="me-auto">提示</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
  </div>
  <div class="toast-body">
    3 秒后自动关闭。
  </div>
</div>

data-bs-delay="3000"：延迟 3 秒后关闭。
data-bs-autohide="true"：启用自动隐藏功能。

如果你希望用户手动点击关闭按钮才隐藏，可以设置 data-bs-autohide="false"。

实际应用场景：表单提交反馈

我们来看一个真实项目中的典型用例：用户提交注册表单后，显示“注册成功”提示。

<!-- 注册表单 -->
<form id="registerForm">
  <div class="mb-3">
    <label for="email" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="email" required>
  </div>
  <button type="submit" class="btn btn-primary">注册</button>
</form>

<!-- 成功提示框 -->
<div class="toast bg-success text-white position-absolute top-0 end-0 m-3" data-bs-delay="2000" data-bs-autohide="true">
  <div class="toast-header">
    <strong class="me-auto">注册成功</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
  </div>
  <div class="toast-body">
    您的账户已创建成功，请查收邮件激活。
  </div>
</div>

// 表单提交事件
document.getElementById('registerForm').addEventListener('submit', function (e) {
  e.preventDefault(); // 阻止默认提交行为

  // 模拟异步提交（实际项目中调用 API）
  setTimeout(() => {
    const toastElement = document.querySelector('.toast');
    const toast = new bootstrap.Toast(toastElement);
    toast.show(); // 显示成功提示
  }, 1000);
});

在这个案例中，我们通过 preventDefault() 阻止表单默认提交，模拟了网络请求过程，1 秒后调用 toast.show() 显示提示框。整个流程流畅自然，用户体验极佳。

Bootstrap5 信息提示框不仅是视觉上的点缀，更是提升交互质量的重要工具。它轻量、灵活、可定制，适用于绝大多数需要“即时反馈”的场景。掌握它，你就能让自己的网页更具专业感与人性化。