码农教程 - 一技在手,衣食无忧! tools

Bootstrap4 JS 警报

❮ 上一节 下一节 ❯

警报 CSS 类

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

Class Description Example
.alert Creates an alert message box 尝试一下
.alert-danger Red alert. Indicates a dangerous or potentially negative action 尝试一下
.alert-dark Dark alert. Dark grey alert box 尝试一下
.alert-dismissible Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding) 尝试一下
.alert-heading Adds color:inherit to the specified element 尝试一下
.alert-info Light-blue alert.Indicates a neutral informative change or action 尝试一下
.alert-light Light alert. Light grey alert box 尝试一下
.alert-link Used on links inside alerts to provide matching colored links 尝试一下
.alert-primary Blue alert. Indicates an important action 尝试一下
.alert-secondary Grey alert. Indicates a "less" important action 尝试一下
.alert-success Green alert. Indicates a successful or positive action 尝试一下
.alert-warning Yellow alert. Indicates caution should be taken with this action 尝试一下
.close Styles the close button for the alert message (floats right with a specified font-size, color, etc.) 尝试一下

通过 data-* 属性关闭警报

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

示例

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

通过 JavaScript 关闭警报

手动关闭：

示例

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

警报选项

None

警报方法

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

Method Description 尝试一下
.alert("close") Closes the alert message 尝试一下
.alert("dispose") Destroys an element's alert.

警报事件

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

Event Description 尝试一下
close.bs.alert Occurs when the alert message is about to be closed 尝试一下
closed.bs.alert Occurs when the alert message has been closed (will wait for CSS transitions to complete) 尝试一下

❮ 上一节 下一节 ❯