Bootstrap3实用教程
2.6.7 控件的状态
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

帮助文本

静态控件

支持的控件

横向表单

行内表单

基本表单

控件的状态

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

Bootstrap为表单控件提供了 4 种状态,分别是获得焦点状态、禁用状态、只读状态、校验状态,并为每种状态定义了相应的样式。

1、获得焦点状态

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

获得焦点状态
图2-61 获得焦点状态

2、禁用状态

为 <input> 设置 disabled 属性,就可以禁止它与用户有任何交互(焦点、输入等)。Bootstrap为被禁用的元素提供灰色背景,并且还添加了not-allowed的鼠标状态。效果如图 2‑62所示:

禁用文本框
图2-62 禁用文本框

<fieldset>设置disabled属性,可以禁用<fieldset>中包含的所有控件。如:

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

效果图 2‑63所示:

禁用 fieldset
图2-63 禁用 fieldset

默认情况下,浏览器会将<fieldset disabled>内所有的原生的表单控件(<input><select><button>元素)设置为禁用状态,防止键盘和鼠标与他们交互。然而,如果表单中还包含<a ... class="btn btn-*">元素,这些元素将只被赋予pointer-events: none属性。但是,该 CSS 属性尚不规范,并且在 Opera 18 及更低版本的浏览器或 Internet Explorer 11 中没有得到全面支持,并且不会阻止键盘用户能够获取焦点或激活这些链接。所以,为了安全起见,建议使用自定义 JavaScript 来禁用这些链接。

另外,虽然 Bootstrap 会将这些样式应用到所有浏览器上,Internet Explorer 11 及以下浏览器中的<fieldset>元素并不完全支持disabled属性。因此,建议在这些浏览器上通过 JavaScript 代码来禁用<fieldset>

3、只读状态

为输入框设置readonly属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。如:

<input class="form-control" type="text" placeholder="Readonly here…" readonly>

效果如图 2‑64所示:

只读状态
图2-64 只读状态

4、校验状态

Bootstrap 为表单控件提供了 3 个校验状态,分别是 error(错误)、warning(警告)、success(成功),并为它们分别提供了 .has-warning.has-error.has-success 类,每个类定义了不同的边框颜色和文本颜色,通过这些颜色来指示不同的状态。

使用时,只需为这些控件的父元素添加相应的类,包含其中的任何 .control-label.form-control.help-block子元素,都将接受这些校验状态的样式。如:

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

效果如图 2‑65所示:

校验状态
图2-65 校验状态

说明:

使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示,但是并不能将这种提示信息传达给使用辅助设备的用户,如屏幕阅读器、或者色盲用户。

为了确保所有用户都能获取正确信息,Bootstrap 还提供了另一种提示方式。如,你可以在表单控件的 <label> 标签上以文本的形式显示提示信息;或者包含一个 Glyphicon 字体图标 (还有赋予 .sr-only 类的文本信息);或者提供一个额外的辅助信息块。另外,对于使用辅助设备的用户,还可以为无效的表单控件赋予一个 aria-invalid="true" 属性。

有时候,我们需要针对校验状态,为输入框提供状态所对应的小图标,以便能够直观地显示。此时,你需要为 .form-group 容器设置 .has-feedback 类,还要通过 <span> 元素添加状态所对应的图标,并为 <span> 元素设置 .form-control-feedback 类,以便图标等正确对齐。如:

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

效果如图 2‑66所示:

校验状态添加图标
图2-66 校验状态添加图标

说明:

反馈图标(feedback icon)只能使用在文本输入框 <input class="form-control"> 元素上。

对于不带有label标签的输入框以及右侧带有附加组件的输入框组,需要手动为其图标定位。为了让所有用户都能访问你的网站,我们强烈建议为所有输入框添加label标签。如果你不希望将label标签展示出来,可以通过添加.sr-only类来实现。如果的确不能添加label标签,请调整图标的top值。对于输入框组,请根据你的实际情况调整right值。

为了确保为辅助技术正确传达一个图标的含义,额外的隐藏的文本应包含在.sr-only类中,并明确关联使用了aria-describedby的表单控件。或者,以某些其他形式(如,文本输入字段有一个特定的警告信息)传达含义,如改变与表单控件实际相关联的<label>的文本。

如果你使用.sr-only类来隐藏表单控件的<label>(而不是使用其它标签选项,如aria-label属性), 一旦它被添加,Bootstrap 会自动调整图标的位置。如:

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

效果如图 2‑67所示:

校验状态添加图标
图2-67 校验状态添加图标

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验