Bootstrap 表单控件的状态

在使用过程中，每个控件可能都会有很多状态，通过表单控件的状态，可以给用户或访问者提供一些有用的反馈。

Bootstrap提供了 4 种状态，分别是获得焦点状态、无效输入状态、禁用状态、验证状态，并为每种状态定义了相应的样式。

1、获得焦点状态

当用户单击了输入框，或按 Tab 键切换到输入框时，输入控件获得焦点。当输入控件获得焦点时，Bootstrap会移除输入框的默认轮廓样式，并使用 box-shadow 来为它添加一个浅蓝色光晕作为边框。效果如图 3‑51所示：

图3-51 Bootstrap表单控件获得焦点状态

2、无效输入状态

当用户在一个文本框中输入了非法内容，浏览器默认会将它设置为 :invalid 状态。Bootstrap就是通过设置这个UI状态伪类选择器的样式，来提示用户。效果如图 3‑52所示：

图3-52 Bootstrap表单控件无效输入状态

3、禁用状态

要禁用某个输入框，只要给 <input> 加上 disabled 属性即可。Bootstrap为被禁用的元素提供灰色背景，并禁用鼠标。效果如图 3‑53所示：

图3-53 Bootstrap表单控件禁止输入状态

4、验证状态

Bootstrap提供了 4 个验证状态，分别是 error（错误）、warning（警告）、info（信息）、success（成功），并为每个状态提供了对应的类。

每个类定义了不同的边框颜色和文本颜色，通过这些颜色来指示不同的状态。要应用这些类所定义的样式，只需把相应的元素放在拥有 .control-group 类和验证状态类的容器中即可。如：

1. <div class="control-group warning">
2.   <label class="control-label" for="inputWarning">Input with warning</label>
3.   <div class="controls">
4.     <input type="text" id="inputWarning">
5.     <span class="help-inline">Something may have gone wrong</span>
6.   </div>
7. </div>
9. <div class="control-group error">
10.   <label class="control-label" for="inputError">Input with error</label>
11.   <div class="controls">
12.     <input type="text" id="inputError">
13.     <span class="help-inline">Please correct the error</span>
14.   </div>
15. </div>
17. <div class="control-group info">
18.   <label class="control-label" for="inputInfo">Input with info</label>
19.   <div class="controls">
20.     <input type="text" id="inputInfo">
21.     <span class="help-inline">Username is already taken</span>
22.   </div>
23. </div>
25. <div class="control-group success">
26.   <label class="control-label" for="inputSuccess">Input with success</label>
27.   <div class="controls">
28.     <input type="text" id="inputSuccess">
29.     <span class="help-inline">Woohoo!</span>
30.   </div>
31. </div>

效果如图 3‑54所示：

图3-54 Bootstrap表单控件验证状态

从上图可以看出，验证状态会影响到 <label> 的文本，使用以下简洁模式，就不会对文本产生影响。如：

1. <div class="control-group warning" style="margin-bottom:-6px">
2.   <label>Input with warning
3.     <input type="text">
4.     <span class="help-inline">Something may have gone wrong</span>
5.   </label>
6. </div>

效果如图 3‑55所示：

图3-55 Bootstrap表单控件验证状态

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。