English 中文 العربية 日本語 Português

Bootstrap: 提示组件

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Charlie 正在开发一个工单提交功能：提交成功显示绿色警告框，失败显示红色警告框，几秒后自动消失用 Toast，操作按钮上悬浮说明用 Tooltip。

(4) 解法

用户操作后需要即时反馈——提交成功、保存失败、删除确认、操作提示。Bootstrap 提供了三种不同层级的反馈组件：警告框、轻提示和工具提示。

理解方式： 警告框 = 页面内固定位置的反馈，Toast = 角落弹出的临时通知，Tooltip = 鼠标悬停时的文字提示。

(5) 收益

使用 Bootstrap 的反馈组件，可以为不同场景提供恰到好处的用户反馈体验。

2. 警告框

▶ 示例：警告框基础

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alert 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 class="alert alert-primary" role="alert">Primary alert - a simple info message.</div>
    <div class="alert alert-success" role="alert">Success - your changes have been saved.</div>
    <div class="alert alert-danger" role="alert">Danger - something went wrong.</div>
    <div class="alert alert-warning" role="alert">Warning - please check your input.</div>
    <div class="alert alert-info" role="alert">Info - new updates are available.</div>

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Notice!</strong> This alert can be dismissed.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Well done!</h4>
      <p>Your account has been created successfully.</p>
      <hr>
      <p class="mb-0">Check your email for verification link.</p>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 警告框颜色

class 语义 用途
alert-primary 蓝色 一般信息
alert-success 绿色 操作成功
alert-danger 红色 错误/失败
alert-warning 黄色 警告/注意
alert-info 青色 提示信息

(2) 可关闭警告框

HTML 
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Error!</strong> Please fix the highlighted fields.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 关键：alert-dismissible 为关闭按钮腾出空间，btn-close 关闭按钮，data-bs-dismiss="alert" 触发关闭。

3. Toast 轻提示

HTML 
<button class="btn btn-primary" onclick="showToast()">Show Toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Notification</strong>
      <small>just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

<script>
  function showToast() {
    var toast = new bootstrap.Toast(document.getElementById('liveToast'))
    toast.show()
  }
</script>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) Toast 结构

元素 class 说明
容器 toast-container 定位在屏幕角落
提示 toast 单个提示卡片
头部 toast-header 图标 + 标题 + 时间
主体 toast-body 消息内容

(2) Toast 配置

HTML 
<div class="toast" data-bs-delay="3000">Auto-hide after 3 seconds</div>
<div class="toast" data-bs-autohide="false">No auto-hide (user must close)</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

4. 工具提示

HTML 
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
        title="Tooltip on top">Top tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"
        title="Tooltip on right">Right tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"
        title="Tooltip on bottom">Bottom tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"
        title="Tooltip on left">Left tooltip</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function(el) {
    return new bootstrap.Tooltip(el)
  })
</script>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

5. Popover 弹出框

HTML 
<button class="btn btn-lg btn-danger" data-bs-toggle="popover"
        title="Popover Title"
        data-bs-content="This is the popover body content.">
  Click to toggle popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

6. 更多提示组件示例

▶ 示例：可关闭的警告框完整演示

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dismissible Alerts</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 class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Success!</strong> Your changes have been saved.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <strong>Error!</strong> Please check your input and try again.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Warning!</strong> Your session will expire in 5 minutes.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
      <strong>Heads up!</strong> New software update is available.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：Toast 通知中心

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast Notifications</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">
    <button class="btn btn-success" onclick="showSuccessToast()">Success Notification</button>
    <button class="btn btn-danger" onclick="showErrorToast()">Error Notification</button>

    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1080;">
      <div id="successToast" class="toast" role="alert">
        <div class="toast-header text-white bg-success">
          <strong class="me-auto">✅ Success</strong>
          <small>just now</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Your data has been saved successfully!
        </div>
      </div>
      <div id="errorToast" class="toast" role="alert">
        <div class="toast-header text-white bg-danger">
          <strong class="me-auto">❌ Error</strong>
          <small>just now</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Something went wrong. Please try again.
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function showSuccessToast() {
      new bootstrap.Toast(document.getElementById('successToast')).show();
    }
    function showErrorToast() {
      new bootstrap.Toast(document.getElementById('errorToast')).show();
    }
  </script>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：工具提示（所有方向）

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip Directions</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-5 text-center">
    <div class="mb-4">
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
        Top
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
        Right
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
        Bottom
      </button>
      <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
        Left
      </button>
    </div>
    <div>
      <button class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-html="true"
              title="<em>Rich</em> <b>Tooltip</b>">
        HTML Tooltip
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function(el) {
      return new bootstrap.Tooltip(el)
    })
  </script>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：Popover 带 HTML 内容

HTML 
<button class="btn btn-lg btn-primary me-2" data-bs-toggle="popover"
        title="Profile Info"
        data-bs-content="<strong>Alice Chen</strong><br>Senior Designer<br><span class='badge bg-success'>Online</span>"
        data-bs-html="true">
  HTML Popover
</button>

<button class="btn btn-lg btn-outline-danger me-2" data-bs-toggle="popover"
        title="Delete Confirmation"
        data-bs-content="Are you sure? This action cannot be undone."
        data-bs-trigger="focus">
  Focus Popover
</button>

<button class="btn btn-lg btn-secondary" data-bs-toggle="popover"
        title="Notification"
        data-bs-content="You have 3 unread messages."
        data-bs-placement="bottom">
  Bottom Popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 通知组件选择流程

100% 
flowchart TD
    A[需要通知用户] --> B{消息重要性}
    B -->|高/立即关注| C[警告框 Alert]
    B -->|中/需确认| D[弹出框 Popover]
    B -->|低/临时| E[轻提示 Toast]
    C --> F{是否需要用户操作}
    F -->|是| G[可关闭 alert-dismissible]
    F -->|否| H[静态 alert]
    E --> I{自动消失？}
    I -->|是| J[默认 5 秒]
    I -->|否| K[data-bs-autohide=false]
    D --> L{触发方式}
    L -->|悬停| M[Tooltip]
    L -->|点击| N[Popover]

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

警告框颜色 class 语义 使用场景
蓝色 alert-primary 信息 系统公告、提示
绿色 alert-success 成功 操作完成、保存成功
红色 alert-danger 错误 操作失败、异常
黄色 alert-warning 警告 即将过期、注意
青色 alert-info 提示 新功能、更新通知
Toast 配置 属性 效果
自动隐藏 data-bs-autohide="true" 默认，几秒后自动消失
手动关闭 data-bs-autohide="false" 用户必须点击关闭
延迟时间 data-bs-delay="3000" 3 秒后消失（毫秒）
动画开启 class="toast fade" 淡入淡出动画
定位容器 toast-container + 定位 固定在屏幕角落
对比维度 Tooltip Popover
触发方式 悬停 hover 点击 click
内容量 少量文字 标题 + 正文 + HTML
方向 top/right/bottom/left 同上
HTML 支持 需 data-bs-html="true" 需 data-bs-html="true"
关闭方式 移出即消失 再次点击或 esc
典型场景 图标说明、缩写释义 表单提示、详情预览

❓ 常见问题

Q Tooltip 为什么不显示？
A 最常见原因：没有初始化 JavaScript！Tooltip 不会自动生效，必须执行 new bootstrap.Tooltip(element) 或批量初始化的代码。
Q Alert 的 role="alert" 有什么用？
A 这是无障碍访问属性，告诉屏幕阅读器这是一条重要信息。建议始终添加。
Q Toast 和 Alert 各适合什么场景？
A Toast 适合打扰程度低的被动通知——不阻塞用户操作，几秒后自动消失。Alert 适合需要用户注意的信息——停留在页面中直到用户关闭。
Q 多个 Toast 同时出现时会堆叠吗？
A 是的。多个 Toast 会按显示顺序在 toast-container 中垂直堆叠，最新的在最上面。每个 Toast 独立计时，不会相互影响。
Q 警告框的 role="alert" 在屏幕阅读器中会中断当前朗读吗？
A 会。role="alert" 是一个 live region，大多数屏幕阅读器会立即朗读其内容，即使正在朗读其他内容也会中断。这正是警告框需要的效果。如果想降低打扰程度，推荐使用 Toast。

📖 小节

📝 作业

  1. ⭐ 创建一个表单提交的反馈流程：提交成功显示绿色可关闭 Alert，提交失败显示红色 Alert。
  2. ⭐⭐ 用 Toast 实现一个"新消息通知"：点击按钮触发 Toast，Toast 显示"New message from Alice"，3 秒后自动消失。
  3. ⭐⭐⭐ 在页面中放置 5 个社会链接图标按钮，每个按钮的 Tooltip 显示对应的平台名称，方向统一在底部。

上一课： 轮播图与模态框 · 下一课： 折叠面板

Web-Tutorial.com

Web-Tutorial 技术团队

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

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏