Bootstrap4 警报

Bootstrap 4 警报

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

成功！此警报框表示操作成功或积极。

信息！此警报框表示中性信息更改或操作。

警告！此警报框表示可能需要注意的警告。

危险！此警报框表示危险或潜在的负面操作。

基本的！此警报框表示有重要操作。

次要！此警报框表示不太重要的操作。

黑暗的！深灰色警报框。

光！浅灰色警报框。

警报是通过以下方式创建的.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>

亲自试一试 »

关闭提醒

×单击右侧的 "x" 符号即可关闭我。

要关闭警报消息，请添加.alert-dismissible警报容器的类。然后加class="close"和data-dismiss="alert"链接或按钮元素（当您单击此元素时，警报框将消失）。

示例

<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>

亲自试一试 »

提示：× (×) 是一个 HTML 实体，它是关闭按钮的首选图标，而不是字母 "x"。

对于所有 HTML 实体的列表，访问我们的 HTML 实体参考。

动画提醒

×单击右侧的 "x" 符号即可关闭我。我会 "fade" 出去。

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

示例

亲自试一试 »

完整的 Bootstrap 4 警报参考

有关所有警报选项、方法和事件的完整参考，请访问我们的Bootstrap 4 JS 警报参考。