警告框用于显示警告信息、错误信息或提示用户注意的内容。Bootstrap 提供了多种样式的警告框，可以根据需要选择合适的样式。
使用警告框
要创建一个基本的警告框，只需要添加 .alert 类到一个 <div> 元素中。此外，还需要使用 .alert- 开头的类来定义警告框的类型，例如：
<div class="alert alert-primary" role="alert"> 这是一个基本的警告框。 </div>
上述代码将创建一个带有浅蓝色背景的基本警告框。
警告框类型
Bootstrap 提供了多种颜色类型的警告框，包括 primary、secondary、success、danger、warning、info 和 light 等。
基本示例
每个类型的警告框都对应着不同的颜色和用途。下面是一些不同类型的警告框示例：
-- -------------------- ---- ------- ---- ------------ -------------- ------------- ---- ------- ------- ------ ---- ------------ ---------------- ------------- ---- --------- ------- ------ ---- ------------ -------------- ------------- ---- ------- ------- ------ ---- ------------ ------------- ------------- ---- ------ ------- ------ ---- ------------ -------------- ------------- ---- ------- ------- ------ ---- ------------ ----------- ------------- ---- ---- ------- ------ ---- ------------ ------------ ------------- ---- ----- ------- ------
深色背景警告框
除了浅色背景的警告框，Bootstrap 还提供了深色背景的警告框类型，如 dark 类型。这可以用于与页面其他部分形成对比。
<div class="alert alert-dark" role="alert"> 这是一个 dark 类型的警告框。 </div>
关闭按钮
警告框可以带有关闭按钮，允许用户通过点击关闭警告框。要实现这一点，只需添加 .alert-dismissible 类，并在警告框内添加一个带有 .close 类的 <button> 元素即可。
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>警告！</strong> 你必须尽快采取行动。 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>
这里，data-bs-dismiss="alert" 属性是关键，它会自动处理关闭功能。
链接颜色
如果希望在警告框内部使用链接，并且希望链接的颜色与警告框的文本颜色保持一致，可以通过添加 .alert-link 类到 <a> 标签来实现。
<div class="alert alert-primary" role="alert"> 这是一个带有 <a href="#" class="alert-link">链接</a> 的警告框。 </div>
这样，链接的颜色将会与警告框内的文本颜色相匹配。
自定义警告框
虽然 Bootstrap 提供了许多现成的警告框样式，但有时你可能需要根据具体需求自定义警告框的外观。可以通过覆盖默认样式来实现这一目标。例如，你可以通过添加自定义 CSS 来改变警告框的边距、圆角等属性。
.custom-alert {
margin: 10px;
border-radius: 10px;
}然后，在 HTML 中应用这个自定义类：
<div class="alert custom-alert alert-primary" role="alert"> 这是一个自定义样式的警告框。 </div>
以上就是 Bootstrap 5 中警告框的相关内容。警告框是一种非常有用的组件，能够帮助用户更清晰地理解页面上的重要信息。通过合理使用这些样式，可以使你的网站或应用界面更加美观和易用。
