Bootstrap 表单校验状态 key:Input输入框:has-error has-warning has-success has-feedback - Bootstrap 表单布局

Bootstrap 表单校验状态

W3CSchool > bootstrap3中文手册 > Bootstrap 表单布局 > 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)即可使用验证状态。

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

  1. <div class="form-group has-success"> 
  2.   <label class="control-label" for="inputSuccess1">Input with success</label> 
  3.   <input type="text" class="form-control" id="inputSuccess1"> 
  4. </div> 
  5. <div class="form-group has-warning"> 
  6.   <label class="control-label" for="inputWarning1">Input with warning</label> 
  7.   <input type="text" class="form-control" id="inputWarning1"> 
  8. </div> 
  9. <div class="form-group has-error"> 
  10.   <label class="control-label" for="inputError1">Input with error</label> 
  11.   <input type="text" class="form-control" id="inputError1"> 
  12. </div> 
  13. <div class="has-success"> 
  14.   <div class="checkbox"> 
  15.     <label> 
  16.       <input type="checkbox" id="checkboxSuccess" value="option1"> 
  17.       Checkbox with success 
  18.     </label> 
  19.   </div> 
  20. </div> 
  21. <div class="has-warning"> 
  22.   <div class="checkbox"> 
  23.     <label> 
  24.       <input type="checkbox" id="checkboxWarning" value="option1"> 
  25.       Checkbox with warning 
  26.     </label> 
  27.   </div> 
  28. </div> 
  29. <div class="has-error"> 
  30.   <div class="checkbox"> 
  31.     <label> 
  32.       <input type="checkbox" id="checkboxError" value="option1"> 
  33.       Checkbox with error 
  34.     </label> 
  35.   </div> 
  36. </div> 

添加额外的图标

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

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

图标、label 和输入控件组

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

  1. <div class="form-group has-success has-feedback"> 
  2.   <label class="control-label" for="inputSuccess2">Input with success</label> 
  3.   <input type="text" class="form-control" id="inputSuccess2"> 
  4.   <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
  5. </div> 
  6. <div class="form-group has-warning has-feedback"> 
  7.   <label class="control-label" for="inputWarning2">Input with warning</label> 
  8.   <input type="text" class="form-control" id="inputWarning2"> 
  9.   <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> 
  10. </div> 
  11. <div class="form-group has-error has-feedback"> 
  12.   <label class="control-label" for="inputError2">Input with error</label> 
  13.   <input type="text" class="form-control" id="inputError2"> 
  14.   <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
  15. </div> 

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

  1. <form class="form-horizontal" role="form"> 
  2.   <div class="form-group has-success has-feedback"> 
  3.     <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label> 
  4.     <div class="col-sm-9"> 
  5.       <input type="text" class="form-control" id="inputSuccess3"> 
  6.       <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
  7.     </div> 
  8.   </div> 
  9. </form> 
  1. <form class="form-inline" role="form"> 
  2.   <div class="form-group has-success has-feedback"> 
  3.     <label class="control-label" for="inputSuccess4">Input with success</label> 
  4.     <input type="text" class="form-control" id="inputSuccess4"> 
  5.     <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
  6.   </div> 
  7. </form> 

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

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

  1. <div class="form-group has-success has-feedback"> 
  2.   <label class="control-label sr-only" for="inputSuccess5">Hidden label</label> 
  3.   <input type="text" class="form-control" id="inputSuccess5"> 
  4.   <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
  5. </div> 

 

CTRL + D 收藏本页

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)