Bootstrap3 表单-添加额外的图标

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

反馈图标只处理文本 <input class="form-control">元素。

图标、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 将自动调整图标的位置。

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

---

—–下面有个“顶”字，你懂得O(∩_∩)O哈哈~
—–乐于分享，共同进步！
—–更多文章请看：http://blog.csdn.net/duruiqi_fx

---