Bootstrap 警告框（Alert）插件

最新推荐文章于 2025-06-19 19:48:29 发布

原创最新推荐文章于 2025-06-19 19:48:29 发布 · 5.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #警告框Alert插件

Bootstrap 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何启用Bootstrap警告框的可取消功能，包括通过data属性和JavaScript实现，并列举了有用的方法及事件，提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有以下两种方式启用警告框的可取消（dismissal）功能：

1、通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>

2、通过 JavaScript添加可取消功能：

$(".alert").alert()

html代码

<div class="alert alert-success">
           <a href="#" class="close" data-dismiss="alert" aria-hidden="true">√</a>
           <strong>成功！</strong>您的网络连接已成功！
        </div>

效果图：

3、下面是一些警告框（Alert）插件中有用的方法：

效果图

4、下表列出了警告框（Alert）插件中要用到的事件。这些事件可在函数中当钩子使用。

html代码

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 警告框（Alert）插件</title>
		<meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap.min.css">  	
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <style>
        	body{
        		font-size:24px;
        		
        	}
        </style>
	</head>
	<body>
	  <div class="container">
		<h3>警告框（Alert）插件 alert() 方法</h3>
		<div id="myAlert" class="alert alert-warning">
			<a href="#" class="close" data-dismiss="alert">×</a>
			<strong>警告！</strong>您的网络连接有问题。
		</div>
		<script type="text/javascript">
			$(function() {
			$("div#myAlert").bind('click',function () {
                alert("警告消息框被关闭。");
				});
			});
		</script>
     </div>
	
	</body>
</html>

效果图