Bootstrap 警告框

Bootstrap 5 提示框 (Alerts)

提示框为典型的用户操作提供上下文相关的反馈信息。Bootstrap 5 提供了一系列预定义的提示框样式，易于实现和定制。

基本提示框

Bootstrap 提供了几种上下文相关的提示框类：

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  **Success!** This alert box indicates a successful or positive action.
</div>
<div class="alert alert-info" role="alert">
  **Info!** This alert box indicates a neutral informative change or action.
</div>
<div class="alert alert-warning" role="alert">
  **Warning!** This alert box indicates a warning that might need attention.
</div>
<div class="alert alert-danger" role="alert">
  **Danger!** This alert box indicates a dangerous or potentially negative action.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

<!--
  可访问性注意：始终在提示消息上包含 `role="alert"` 属性，以确保辅助技术（如屏幕阅读器）可以播报它们。
  对于关键提示，考虑使用 `role="alertdialog"` 或 JavaScript 焦点管理。
-->

提示框通过基础的 .alert 类创建，后接一个上下文类：.alert-primary, .alert-secondary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-light, 或 .alert-dark。

应用场景：使用 success 提示框表示表单提交成功，danger 提示框表示错误，info/warning 提示框表示重要通知。

带链接和附加内容的提示框

你可以在提示框内包含链接，通过在 <a> 标签上使用 .alert-link 工具类来提供颜色匹配的链接。

<div class="alert alert-warning" role="alert">
  You should check in on <a href="#" class="alert-link">this important alert message</a>.
</div>

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

<!-- 提示：在提示框内使用标题元素（本例中为 `<h4>`）和段落可以创建更有结构的内容。`<hr>` 元素可以提供视觉分隔。 -->

可关闭的提示框

要使提示框可关闭，请向提示框 <div> 添加 .alert-dismissible 类。然后，添加一个带有 .btn-close 类和 data-bs-dismiss="alert" 属性的关闭按钮。

× Success! This alert box can be closed.

<div class="alert alert-success alert-dismissible fade show" role="alert">
  **Success!** You can close this alert message.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  **Error!** Something went wrong. Please try again.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!--
  Explanation:
  - `.alert-dismissible`: 关闭按钮正确定位所需。
  - `.btn-close`: 将按钮样式化为关闭图标。
  - `data-bs-dismiss="alert"`: 关闭提示框的 JavaScript 触发器。
  - `aria-label="Close"`: 对可访问性至关重要，为屏幕阅读器提供标签。
  - `.fade` 和 `.show`: 用于通过淡入淡出效果动画化提示框关闭的类。`.show` 使其最初可见。
-->

常见陷阱：忘记包含 Bootstrap 的 JavaScript 文件（包括 Popper 的 bootstrap.bundle.min.js）将导致可关闭的提示框无法工作，因为 data-bs-dismiss 功能依赖于它。

提示框的 JavaScript 触发器和事件

虽然 data-bs-dismiss 很常用，你也可以通过 JavaScript 控制提示框。

// Get an alert instance
var myAlert = document.getElementById('myDismissibleAlert');
if (myAlert) {
  var bsAlert = new bootstrap.Alert(myAlert);

  // To close an alert programmatically:
  // bsAlert.close(); // 通过编程方式关闭提示框
}

// Listening to alert events
var anAlertElement = document.getElementById('myEventAlert');
if (anAlertElement) {
 anAlertElement.addEventListener('close.bs.alert', function () {
    console.log('Alert is about to be closed.'); // 提示框即将关闭
  });
  anAlertElement.addEventListener('closed.bs.alert', function () {
    console.log('Alert has been closed.'); // 提示框已关闭
  });
}

/*
  Available Events: (可用事件)
  - `close.bs.alert`: 当调用 `close` 实例方法时立即触发。
  - `closed.bs.alert`: 当提示框已关闭时触发（会等待 CSS 过渡完成）。
  有关 JavaScript 用法的更多信息：https://getbootstrap.com/docs/5.3/components/alerts/#javascript-behavior
*/

完整的 Bootstrap 提示框参考

有关提示框的完整指南，包括高级 JavaScript 选项和如何集成图标，请参考 Bootstrap 5 官方文档：https://getbootstrap.com/docs/5.3/components/alerts/