0%

7.10 警告框 7.10.1 警告框基础

发表于 更新于 分类于 ， ，

7.10 警告框

警告框也相当于一个简单的容器,用于向用户动作提供一些反馈消息。

7.10.1 警告框基础

Bootstrap为警告框提供了如下基础样式。

样式 描述
.alert 所有警告框都需要设置的样式。
.alert-success 表示成功的警告框,背景色是绿色。
.alert-info 表示普通信息的警告框,背景色是浅蓝色。
.alert-warning 表示警告的警告框,背景色是黄色。
.alert-danger 表示危险的警告框,背景色是红色。
.alert-dismissible 该样式可应用于所有警告框,用于表示可关闭的警告框。
只要将这些样式应用于<div>元素即可得到警告框。
## 简单警告框 ##
下面是简单的警告框示例。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> 简单警告框 </title>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
	<div class="container">
		<!-- 成功警告框 -->
		<div class="alert alert-success" role="alert">
			恭喜您，登录成功
		</div>
		<!-- 信息警告框 -->
		<div class="alert alert-info" role="alert">
			页面加载完成
		</div>
		<!-- 警告警告框 -->
		<div class="alert alert-warning" role="alert">
			请注意，系统库存紧张，请尽快下单
		</div>
		<!-- 危险警告框 -->
		<div class="alert alert-danger" role="alert">
			系统出错，请联系管理员
		</div>
	</div>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

这里的代码使用.alert样式与其他表示警告框风格的样式组合出了4种警告框。

如何构建可关闭的警告框

如果要构建可关闭的警告框,则需要应用.alert-dismissible 样式。此外,由于可关闭的警告框需要依赖JS处理用户动作,因此可关闭的警告框需要依赖jQuery警告框插件。
构建可关闭的警告框需要为该警告框添加一个关闭按钮,并为该关闭按钮完成如下两个设置。

  1. 为关闭按钮指定class="close"样式,则该关闭按钮会自动显示在警告框的右上角。
  2. 为关闭按钮设置data-dismiss="alert",则用户单击该按钮时警告框会自动关闭。

下面的代码示范了可关闭的警告框的设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> 可关闭的警告框 </title>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
	<div class="container">
		<!-- alert-dismissible样式表示该警告框可关闭 -->
		<!-- 1号代码 -->
		<div class="alert alert-warning alert-dismissible" role="alert">
			<!-- 添加关闭按钮 close样式使得按钮显示在右上角-->
			<!-- data-dismiss="alert"使得单击该按钮时关闭警告框-->
			<!-- 2号代码 -->
			<button type="button" class="close" data-dismiss="alert" aria-label="关闭">
				<!-- 关闭图标 -->
				<span aria-hidden="true">&times;</span>
			</button>
			请注意，系统库存紧张，请尽快下单
		</div>
	</div>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

该程序中的:

  • 1号代码为警告框增加了.alert-dismissible 样式,该样式表明该警告框是一个可关闭的警告框。
  • 2号代码为按钮设置了class="close" data-dismiss="alert"属性,这表明该按钮将具有关闭按钮的外观和关闭警告框的功能。

原文链接: 7.10 警告框 7.10.1 警告框基础