在使用过程中，每个控件可能都会有很多状态，通过表单控件的状态，可以给用户或访问者提供一些有用的反馈。
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 类和验证状态类的容器中即可。如：
<div class="control-group warning"><label class="control-label" for="inputWarning">Input with warning</label><div class="controls"><input type="text" id="inputWarning"><span class="help-inline">Something may have gone wrong</span></div></div><div class="control-group error"><label class="control-label" for="inputError">Input with error</label><div class="controls"><input type="text" id="inputError"><span class="help-inline">Please correct the error</span></div></div><div class="control-group info"><label class="control-label" for="inputInfo">Input with info</label><div class="controls"><input type="text" id="inputInfo"><span class="help-inline">Username is already taken</span></div></div><div class="control-group success"><label class="control-label" for="inputSuccess">Input with success</label><div class="controls"><input type="text" id="inputSuccess"><span class="help-inline">Woohoo!</span></div></div>
效果如图 3‑54所示：
图3-54 Bootstrap表单控件验证状态
从上图可以看出，验证状态会影响到 <label> 的文本，使用以下简洁模式，就不会对文本产生影响。如：
<div class="control-group warning" style="margin-bottom:-6px"><label>Input with warning<input type="text"><span class="help-inline">Something may have gone wrong</span></label></div>
效果如图 3‑55所示：
图3-55 Bootstrap表单控件验证状态
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
