如何使用Twitter Bootstrap自动关闭Alert组件

我们可以通过使用Twitter bootstrap提供的 “close “方法和 “hide “类来自动关闭Bootstrap Alert组件。Twitter Bootstrap Alert组件用于向用户显示带有信息的警报，通常是为了响应用户的动作或事件。

方法1：使用关闭方法

在这个方法中，我们将使用bootstrap提供的 “close “方法来关闭组件，我们将使用浏览器API的setTimeout()来实现5秒后的关闭。

语法

$(alertComponent).alert(‘close’)

这里，”alertComponent “是Bootstrap的Alert组件，我们在这个组件上调用 “close “方法。

例子

在这个例子中，我们将使用bootstrap提供的 “close “方法和浏览器API的setTimeout()，在5秒后自动关闭Alert组件。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatically Close Alerts using Twitter Bootstrap?</title>
   <link rel="stylesheet" href=
   "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
   <script src=
      "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
   </script>
   <!-- Including Bootstrap JS -->
   <script src=
      "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
   </script>
</head>
<body>
   <h3>How to Automatically Close Alerts using Twitter Bootstrap?</h3>
   <div id="alert" class="alert alert-success">
   This alert will automatically close in 5 seconds.
   </div>
   <script>
      const alert = document.getElementById('alert');
      setTimeout(() => {
         $('#alert').alert('close')
      }, 5000)
   </script>
</body>
</html>

方法2：使用hide类

在这个方法中，我们将在Alert组件中添加一个 “hide “类来自动关闭Alert，我们将使用setTimeout()浏览器API来实现5秒后的自动关闭。

语法

$(alertComponent).addClass(hide’)

这里，”alertComponent “是Bootstrap的Alert组件，我们在这个组件上添加 “hide “类。

例子

在这个例子中，我们将使用bootstrap提供的 “hide “类和浏览器API的setTimeout()，在5秒后自动关闭Alert组件。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatically Close Alerts using Twitter Bootstrap?</title>
   <link rel="stylesheet" href=
   "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
   <script src=
      "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
   </script>
   <!-- Including Bootstrap JS -->
   <script src=
      "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
   </script>
</head>
<body>
   <h3>How to Automatically Close Alerts using Twitter Bootstrap?</h3>
   <div id="alert" class="alert alert-success">
      This alert will automatically close in 5 seconds.
   </div>
   <script>
      const alert = document.getElementById('alert');
      setTimeout(() => {
         $('#alert').addClass('hide')
      }, 5000)
   </script>
</body>
</html>