Bootstrap2用户指南
3.4.9 表单控件的状态
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

排版

源代码

表格

表单

表单的帮助文本

表单的动作按钮

不可编辑的控件

表单控件的尺寸

表单的扩展控件

表单的基本控件

表单的可选布局

表单的默认布局

表单控件的状态

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

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

1、获得焦点状态

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

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

2、无效输入状态

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

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

3、禁用状态

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

Bootstrap表单控件禁止输入状态
图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所示:

Bootstrap表单控件验证状态
图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所示:

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

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验