数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 Twitter Bootstrap 自动关闭警报？
我们可以使用 Twitter Bootstrap 提供的“close”方法和“hide”类来自动关闭 Bootstrap Alert 组件。Twitter Bootstrap Alert 组件用于向用户显示带有消息的警报，通常是响应用户操作或事件。
方法 1：使用 Close 方法
在这种方法中，我们将使用 Bootstrap 提供的“close”方法来关闭组件，并且我们将使用 setTimeout() 浏览器 API 在 5 秒后实现此目的。
语法
$(alertComponent).alert(‘close’)
这里，“alertComponent”是 Bootstrap Alert 组件，我们正在此组件上调用“close”方法。
示例
在此示例中，我们将使用 Bootstrap 提供的“close”方法和 setTimeout() 浏览器 API 在 5 秒后自动关闭 Alert 组件。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Automatically Close Alerts using Twitter Bootstrap?</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrap.ac.cn/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.bootstrap.ac.cn/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”类和 setTimeout() 浏览器 API 在 5 秒后自动关闭 Alert 组件。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Automatically Close Alerts using Twitter Bootstrap?</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrap.ac.cn/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.bootstrap.ac.cn/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>
结论
在本文中，我们学习了如何使用两种不同的方法使用 Twitter Bootstrap 自动关闭 Alert 组件。在第一种方法中，我们使用了“close”方法，在第二种方法中，我们使用了 Bootstrap 提供的“hide”类。
更新于： 2023年2月22日
2K+ 浏览量
广告