6.9.10 校验状态的图标

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

6.9.10 校验状态的图标

Bootstrap 还允许为表单控件的校验状态设置图标。为表单控件的校验状态设置图标需要注意两点:

  1. 在包含<label>元素和表单控件的容器上添加.has-feedback样式。
  2. 为空的<span>元素添加一个前面介绍的小图标,并为该元素添加.form-control-feedback样式。

表示校验状态的图标只能应用在文本输入框<input class="form-control">元素上。
下面的示例示范了校验状态图标的使用方法:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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">
        <form action="http://www.fkit.org" class="form-horizontal">
            <!-- 1号代码 -->
            <div class="form-group has-success has-feedback">
                <label for="succ" class="col-sm-2 control-label">正确</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="succ" aria-describedby="successStatus">
                    <!-- 增加图标提示 -->
                    <!-- 2号代码 -->
                    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                    <!-- 只有屏幕阅读器才能看到 -->
                    <!-- 3号代码 -->
                    <span id="successStatus" class="help-block sr-only">校验通过</span>
                </div>
            </div>
            <div class="form-group has-warning has-feedback">
                <label for="warning" class="col-sm-2 control-label">警告</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="warning" aria-describedby="warningStatus">
                    <!-- 增加图标提示 -->
                    <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                    <!-- 只有屏幕阅读器才能看到 -->
                    <span id="warningStatus" class="help-block sr-only">校验有点问题</span>
                </div>
            </div>
            <div class="form-group has-error has-feedback">
                <label for="error" class="col-sm-2 control-label">错误</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="error" aria-describedby="errorStatus">
                    <!-- 增加图标提示 -->
                    <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                    <!-- 只有屏幕阅读器才能看到 -->
                    <span id="errorStatus" class="help-block sr-only">校验有点问题</span>
                </div>
            </div>
        </form>
    </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>

在该页面代码中定义了三个<div>元素,并在每个<div>元素中定义一组label 和表单控件。

  • 其中1号代码添加了.has-feedback样式;
  • 第2号代码添加了一个表示校验状态的图标,并添加了.form-control-feedback样式;
  • 第3号代码定义了额外的帮助文本(.help-block),并指定了.sr-only 样式,这表明这段额外的帮助文本专门用于向屏幕阅读器提供信息。

需要说明的是,对于不带<label>标签的输入框以及右侧带有附加组件的输入框组,需要手动定位图标。为了让所有用户都能访问你的网站,Bootstrap 建议为所有输入框添加<label>标签。如果不希望将<label>标签展示出来,添加.sr-only样式即可。如果确实不能添加<label>标签,则需要调整图标的top值。对于输入框组,要根据实际情况调整图标的right值。