全面解析Bootstrap表单使用方法（表单控件状态）

全面解析Bootstrap表单使用方法（表单控件状态）

一、焦点状态

　　焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。

二、禁用状态

　　Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。

禁用的输入框

禁用的下拉框

不可选择

无法选择

提交

三、验证状态

　　在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。

　　1、.has-warning:警告状态（黄色）

　　2、.has-error：错误状态（红色）

　　3、.has-success：成功状态（绿色）

　　使用的时候只需要在form-group容器上对应添加状态类名

成功状态

警告状态

错误状态

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是针对Bootstrap表单控件状态的详细介绍，之后还有更多内容会不断更新，希望大家继续关注。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。