Bootstrap 4 警告框
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 类，以创建“匹配颜色的链接”
成功！ 您应该 阅读此消息。
信息！ 您应该 阅读此消息。
警告！ 您应该 阅读此消息。
危险！ 您应该 阅读此消息。
主要！ 您应该 阅读此消息。
次要！ 您应该 阅读此消息。
深色！ 您应该 阅读此消息。
浅色！ 您应该 阅读此消息。
示例
<div class="alert alert-success">
<strong>成功！</strong> 您应该 <a href="#" class="alert-link">阅读此消息</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 和 .show 类可在关闭警告消息时添加淡出效果
完整的 Bootstrap 4 警告框参考
有关所有警告框选项、方法和事件的完整参考，请访问我们的 Bootstrap 4 JS 警告框参考。
