Bootstrap警告框使用方法解析

Bootstrap是一个流行的前端框架，它提供了许多组件来帮助开发人员快速构建响应式界面。其中之一就是警告框（Alerts），用于向用户显示重要信息或错误消息。本文将详细介绍Bootstrap警告框的使用方法，包括类型、关闭按钮、嵌套和事件处理。

警告框类型

Bootstrap警告框有四种类型：成功（success）、信息（info）、警告（warning）和危险（danger）。通过添加不同的类名可以指定不同的类型。

示例代码：

---- ------------ -------------- -------------
  ---- -- - ------- ----------- -- ----
------
---- ------------ ----------- -------------
  ---- -- -- ---- ----------- -- ----
------
---- ------------ -------------- -------------
  ---- -- - ------- ----------- -- ----
------
---- ------------ ------------- -------------
  ---- -- - ------ ----------- -- ----
------

效果图：

关闭按钮

默认情况下，Bootstrap警告框右侧有一个可选的关闭按钮（close button），点击该按钮可以关闭警告框。如果想要禁用关闭按钮，可以在元素上添加 data-dismiss="alert" 属性。

示例代码：

---- ------------ ------------- ----------------- ---- ----- -------------
  ------------------------- ------ ----- --------- ------ --- ------- --- -----
  ------- ------------- ----------------- -------------------- ----------------------------
------

---- ------------ ------------- ------------ ---------------------
  ---- ----- ----- -- ----------
------

效果图：

嵌套

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