Bootstrap是一个流行的前端框架，它提供了许多组件来帮助开发人员快速构建响应式界面。其中之一就是警告框（Alerts），用于向用户显示重要信息或错误消息。本文将详细介绍Bootstrap警告框的使用方法，包括类型、关闭按钮、嵌套和事件处理。
警告框类型
Bootstrap警告框有四种类型：成功（success）、信息（info）、警告（warning）和危险（danger）。通过添加不同的类名可以指定不同的类型。
示例代码：
-- -------------------- ---- ------- ---- ------------ -------------- ------------- ---- -- - ------- ----------- -- ---- ------ ---- ------------ ----------- ------------- ---- -- -- ---- ----------- -- ---- ------ ---- ------------ -------------- ------------- ---- -- - ------- ----------- -- ---- ------ ---- ------------ ------------- ------------- ---- -- - ------ ----------- -- ---- ------
效果图：
关闭按钮
默认情况下，Bootstrap警告框右侧有一个可选的关闭按钮（close button），点击该按钮可以关闭警告框。如果想要禁用关闭按钮，可以在元素上添加 data-dismiss="alert" 属性。
示例代码：
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Warning!</strong> Better check yourself, you're not looking too good. <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button> </div> <div class="alert alert-danger" role="alert" data-dismiss="alert"> This alert can't be dismissed! </div>
效果图：
嵌套
Bootstrap警告框可以嵌套在其他元素中，例如导航栏（navbar）或卡片（card）。在嵌套时，需要将 role="alert" 属性添加到包含警告框的元素上。
示例代码：
-- -------------------- ---- -------
---- ------------- ---------------- ------------ ----------
---- ------------------------
-- -------------------- -------------------
---- --------------- -----------------
--- -------------------
--- -----------------
-- ---------------- -----------------
-----
-----
---- ------------ ------------- ------ ------------------ ---- -------------
---- ---------------------------------- ---------- ----------- ------------------- --------- --------------------- ---------- - -- ----
----- ----- --- - - - - - --- - - - - - ------- ----------- - - - -------- ---------------------- --------- - - --- -------- ----------- - - - ------------------ - - - ---------- ---- -------------
------
---- ---------------- ---- ------------ ------ ---------
------
------
------
------效果图：
事件处理
Bootstrap警告框提供了四个事件：closed.bs.alert、close.bs.alert、opened.bs.alert和open.bs.alert，分别在关闭前、关闭后、打开前和打开后触发
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1221