前端必知必会-Bootstrap 5警报Alerts

---

Bootstrap 5 提示Alerts

Bootstrap 5 提供了一种创建预定义提示Alerts消息的简单方法：

提示使用 .alert 类创建，后跟上下文类 .alert-success、.alert-info、.alert-warning、.alert-danger、.alert-primary、.alert-secondary、.alert-light 或 .alert-dark 之一：

示例

<div class="alert alert-success">
<strong>成功！</strong> 表示成功或积极的操作。
</div>

提示链接

将 .alert-link 类添加到提示框内的任何链接以创建“匹配颜色的链接”：

示例

<div class="alert alert-success">
<strong>成功！</strong> 您应该<a href="#" class="alert-link">阅读此消息</a>。
</div>

关闭提示

要关闭提示消息，请将 .alert-dismissible 类添加到提示容器。然后将 class=“btn-close” 和 data-bs-dismiss=“alert” 添加到链接或按钮元素（单击此按钮时，提示框将消失）。

示例

<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>成功！</strong>此提示框可以指示成功或积极的操作。
</div>

动画提示

.fade 和 .show 类在关闭提示消息时添加淡入淡出效果：

示例

<div class="alert alert-danger alert-dismissible fade show">

---

总结

本文介绍了Bootstrap 5警报Alerts的使用，如有问题欢迎私信和评论