Bootstrap 警告（Alerts）
Bootstrap 警告（Alerts）
Bootstrap 警告（Alerts）是帮助用户获取展示在页面顶部的重要信息的一种工具，用户可以自定义警告框的颜色、内容和样式，以满足特定需求。本文主要介绍如何使用 Bootstrap 警告。
基础语法
Bootstrap 警告使用以下 HTML 结构：
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
其中，alert 类是必需的，同时 alert-* 类可以使用多个。常见的 alert-* 类有：
alert-primary：蓝色警告alert-secondary：灰色警告alert-success：绿色警告alert-danger：红色警告alert-warning：黄色警告alert-info：淡蓝色警告alert-light：浅灰色警告alert-dark：深灰色警告
role="alert" 用于提醒屏幕阅读器警告框的存在。
插入文本和标题
可插入文本、标题等内容：
<div class="alert alert-primary" 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>
在警告框中，任何 HTML 元素都可以插入。
可关闭的警告框
可以想必关闭警告框的：
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
alert-dismissible 类将创建一个包括关闭 button 的警告框。btn-close 类是用于关闭警告框的按钮，data-bs-dismiss="alert" 标记用于关闭警告框的触发器。
加上 .fade 和 .show 两个类可以使得警告框有淡入淡出效果。
链接警告框
可以将警告框变成链接：
<a href="#" class="alert alert-warning" role="alert">
This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</a>
使用 alert-link 类可以将警告框内文字链接起来。
自定义警告框
用户可以通过在 .alert 中添加 .bg-* 或 .text-* 类来自定义警告框的背景颜色和文本颜色。用户可以使用 .alert-heading 类自定义标题。
<div class="alert bg-light text-dark" role="alert">
<h4 class="alert-heading">Background color</h4>
This alert's background color is light (gray). You can set the background color of the alert according to your needs.
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
总结
Bootstrap 警告提供了一种在页面顶部获得重要信息的有效方式。Bootstrap 警告有多种颜色和样式，可以帮助用户有效地展示不同类型的警示信息。用户可以使用 Bootstrap 警告的基本语法以及自定义警告框的语法，应对不同的应用场景。