6.9.9 校验状态
Bootstrap为表单控件的校验状态提供了如下样式。
| 样式 |
描述 |
.has-success |
校验成功,显示绿色。 |
.has-warning |
警告,显示黄色。 |
.has-error |
校验错误,显示红色。 |
| 将这些样式应用在包含表单控件的容器上,则该容器内所有表单控件、标签、帮助文本都会受到该样式的影响。 |
|
例如如下代码:
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
55
| <!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">
<div class="form-group has-success">
<label class="control-label" for="succ">成功</label>
<input type="text" class="form-control" id="succ" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">该输入控件校验通过.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="warning">警告</label>
<input type="text" class="form-control" id="warning">
</div>
<div class="form-group has-error">
<label class="control-label" for="error">错误</label>
<input type="text" class="form-control" id="error">
</div>
<div class="has-success">
<div class="radio">
<label>
<input type="radio" name="rd" value="option1"> 成功状态的单选框
</label>
</div>
</div>
<div class="has-warning">
<div class="radio">
<label>
<input type="radio" name="rd" value="option2"> 警告状态的单选框
</label>
</div>
</div>
<div class="has-error">
<div class="radio">
<label>
<input type="radio" name="rd" value="option3"> 错误状态的单选框
</label>
</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>
|
在该页面代码中定义了6个<div>元素,每个<div>元素包含一组label、表单控件等,当程序对包含表单控件的<div>元素应用校验状态的样式时,会影响该容器内所有控件。
需要说明的是,上面这些校验状态的样式,仅仅只是通过颜色来表达—这种表达可能和约定俗成有关,这些颜色效果对于某些用户(如使用屏幕阅读器的用户、色盲用户)无效。如果需要向所有用户都提供正确的校验状态,Bootstrap 推荐在<label>标签上以文本形式显示提示信息,或使用Glyphicon 字体图标,或使用额外的帮助文本块。在下一节的示例中我们会看到使用额外信息来显示校验状态。
原文链接: 6.9.9 校验状态