转载

Bootstrap 校验状态

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。
使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

下面的实例演示了所有控件状态：

<div class="form-group has-success">

  <label class="control-label" for="inputSuccess1">Input with success</label>

  <input type="text" class="form-control" id="inputSuccess1">

</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>

添加额外的图标

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

Feedback icons only work with textual <input class="form-control"> elements.

图标、`label` 和输入控件组

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

<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">

  <span class="glyphicon glyphicon-ok form-control-feedback"></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">

  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></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">

  <span class="glyphicon glyphicon-remove form-control-feedback"></span>

</div>

为水平排列的表单和内联表单设置可选的图标

<form class="form-horizontal" role="form">

  <div class="form-group has-success has-feedback">

    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>

    <div class="col-sm-9">

      <input type="text" class="form-control" id="inputSuccess3">

      <span class="glyphicon glyphicon-ok form-control-feedback"></span>

    </div>

  </div>

</form>

<form class="form-inline" role="form">

  <div class="form-group has-success has-feedback">

    <label class="control-label" for="inputSuccess4">Input with success</label>

    <input type="text" class="form-control" id="inputSuccess4">

    <span class="glyphicon glyphicon-ok form-control-feedback"></span>

  </div>

</form>

可选的图标与设置 `.sr-only` 类的 `label`

通过为 label 元素添加 .sr-only 类，可以让表单控件的 label 元素不可见。在这种情况下，Bootstrap 将自动调整图标的位置。

Hidden label

<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">

  <span class="glyphicon glyphicon-ok form-control-feedback"></span>

</div>