当前位置: 首页 > 编程笔记 >

Bootstrap中表单控件状态(验证状态)

徐隐水
2023-03-14
本文向大家介绍Bootstrap中表单控件状态(验证状态),包括了Bootstrap中表单控件状态(验证状态)的使用技巧和注意事项,需要的朋友参考一下

在制作html" target="_blank">表单时,难免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。

1、.has-warning:警告状态(黄色)

2、.has-error:错误状态(红色)

3、.has-success:成功状态(绿色)

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

<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
</div>
</form> 

运行效果如下或查看右侧结果窗口:

很多时候,在表单验证的时候,不同的状态会提供不同的icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示icon出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:

<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form> 

运行效果如下或查看右侧结果窗口:

从效果图中可以看出,图标都居右。在Bootstrap的小图标都是使用@font-face来制作(后面的内容中将会着重用一节内容来介绍)。而且必须在表单中添加了一个span元素:

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

以上所述是小编给大家介绍的Bootstrap中表单控件状态(验证状态) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍全面解析Bootstrap表单使用方法(表单控件状态),包括了全面解析Bootstrap表单使用方法(表单控件状态)的使用技巧和注意事项,需要的朋友参考一下 一、焦点状态   焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。     二、禁用状态   Bootstrap框架的表单控件的禁用状态和普通

  • 本文向大家介绍Bootstrap Validator 表单验证,包括了Bootstrap Validator 表单验证的使用技巧和注意事项,需要的朋友参考一下 在线演示地址:http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html 使用方法,代码如下所示: 以上所述是小编给大家介绍的Bootstrap Validato

  • 7. 状态监控 主界面右下角状态栏可查看课堂的网络状态,如果房间网络状态不佳,请检查讲师和各个学员的本地网络链接是否正常。 延时 表示各个参会者之间的互动延时,延时在 0.2S 以下为正常状态,如果延时较高则可能会影响参会者的互动体验效果。 丢包 表示网络链路的传输质量,丢包率在 1%以下为正常状态,如果丢包率较高则可能会出现视频卡顿或中断等现象。 网络 表示房间的整体网络状态,其中“好”为正常状

  • 本文向大家介绍BootStrap Select清除选中的状态恢复默认状态,包括了BootStrap Select清除选中的状态恢复默认状态的使用技巧和注意事项,需要的朋友参考一下 PC端项目中经常会出现大量的数据列表页面,涉及到下拉框选择筛选条件; 当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢? 如【图1】 当我们选择摸一个条件之后 如【图2】 此时点

  • 我在我的应用程序中使用Firebase认证,用户可以使用电子邮件和密码注册,他必须验证电子邮件。 用户收到验证邮件,但当他验证邮件并返回应用程序时,isEmailVerified()始终为false。所以我的应用程序仍然不允许用户使用所有功能,尽管事实上他已经验证了他的电子邮件。 但是如果他们注销并再次登录,isEmailVerified()立即返回true。但是注销用户然后重新登录是不是很好。

  • 5.2 状态码监控 对于动态请求,Nginx本身不处理请求,而是反向代理到业务服务器,由业务服务器来真正处理请求。 业务服务器的处理状态,可以通过http返回状态码来判定。Nginx本身的access.log中,记录了每条请求以及返回状态码。对返回状态码进行监控,可以了解业务服务器的状态。 目前Camel以业务集群upstream为粒度进行监控,提供了状态码趋势图、状态码大盘、监控规则报警功能。

  • 1.自动收货完成如何设置? 商家可以在【交易设置】里面设置自动确认收货时间,从发货时间开始后粉丝没有在手机端点击确定收货,后台系统到时间自动确定收货。 2.订单可以修改价格吗? 订单在待付款状态下可以修改价格。 3.已经完成的订单为什么自动就关闭? 用户通过额外方式导入的订单数据,导入的订单数据为待支付状态,订单的创建时间到现在时间超出了订单自动关闭时间 所以订单自动关闭了。 4.支付时,扫码提示

  • 如果用户验证了他的电子邮件,我如何能够实时检查? 我的flow是这样的: < li >用户注册 < li >电子邮件已发送 < li >用户看到“请验证您的电子邮件”通知 现在我想: 为此,我需要一种从firebase获取用户数据的方法。通常,您只需使用onAuthStateChanged回调来获取用户数据,但我需要显式获取当前数据。 我该怎么做呢?