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">×</a>
通过 JavaScript 关闭警报
手动关闭:
实例
$('.close').alert("close");
Alert 选项
| None |
Alert 方法
下表列出了所有可用的警报方法。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .alert("close") | 关闭警报消息 | |
| .alert("dispose") | 破坏元素的警报。 |
Alert 事件
下表列出了所有可用的警报事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| close.bs.alert | 在警报消息即将关闭时发生 | |
| closed.bs.alert | 在警报消息关闭时发生（将等待 CSS 转换完成） |