Bootstrap 4 JS 警报

警报 CSS 类

有关警报的教程,请阅读我们的 Bootstrap 警报教程

描述 例子
.alert 创建一个警报消息框 测试一下
.alert-danger 红色警报。表示危险或潜在的负面行为 测试一下
.alert-dark 黑暗警报。深灰色警报框 测试一下
.alert-dismissible 表示可关闭的警报框。与 .close 类一起,该类用于关闭警报(添加额外的填充) 测试一下
.alert-heading color:inherit 添加到指定元素 测试一下
.alert-info 浅蓝色警报。表示中性信息更改或操作 测试一下
.alert-light 轻警报。浅灰色警报框 测试一下
.alert-link 用于警报内的链接以提供匹配的彩色链接 测试一下
.alert-primary 蓝色警报。表示重要动作 测试一下
.alert-secondary 灰色警报。表示"不太重要"的动作 测试一下
.alert-success 绿色警报。表示成功或积极的行动 测试一下
.alert-warning 黄色警报。表示应谨慎执行此操作 测试一下
.close 为警报消息设置关闭按钮的样式(以指定的字体大小、颜色等向右浮动) 测试一下

通过 data-* 属性关闭警报

data-dismiss="alert" 添加到链接或按钮元素以关闭警报消息。

实例

<a href="#" class="close" data-dismiss="alert">&times;</a>
亲自试一试 »

通过 JavaScript 关闭警报

手动关闭:

实例

$('.close').alert("close");
亲自试一试 »

Alert 选项

None

Alert 方法

下表列出了所有可用的警报方法。

方法 描述 试一试
.alert("close") 关闭警报消息 测试一下
.alert("dispose") 破坏元素的警报。

Alert 事件

下表列出了所有可用的警报事件。

事件 描述 试一试
close.bs.alert 在警报消息即将关闭时发生 测试一下
closed.bs.alert 在警报消息关闭时发生(将等待 CSS 转换完成) 测试一下