7.10 警告框 7.10.1 警告框基础

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.3k 阅读时长 ≈ 3 分钟

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"属性,这表明该按钮将具有关闭按钮的外观和关闭警告框的功能。