Bootstrap5 警报

警报

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

警报是通过以下方式创建的.alert类，后跟上下文类之一.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light或者.alert-dark:

示例

<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>

亲自试一试 »

警报链接

添加.alert-link类到警报框中的任何链接以创建"matching colored links"：

示例

<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</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>Success!</strong> This alert box could indicate a successful or positive action.
</div>

亲自试一试 »

动画提醒

这个.fade和.show关闭警报消息时，classes 添加淡入淡出效果：

示例

亲自试一试 »