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


Posted in Javascript onAugust 04, 2016

在制作表单时,难免要做表单验证。同样也需要提供验证状态样式,在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>

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

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

很多时候,在表单验证的时候,不同的状态会提供不同的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中表单控件状态(验证状态)

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

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

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

Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
聊聊鉴权那些事(推荐)
Aug 22 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
Bootstrap实现input控件失去焦点时验证
Aug 04 #Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 #Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 #Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 #Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 #Javascript
JS 数字转换为大写金额的简单实例
Aug 04 #Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 #Javascript
You might like
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php中session使用示例
2014/03/29 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
python实现socket客户端和服务端简单示例
2014/02/24 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python实现合并字典的方法
2015/07/07 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python selenium 获取接口数据的实现
2020/12/07 Python
html5的localstorage详解
2017/05/09 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
分家协议书
2014/04/21 职场文书
网络编辑求职信
2014/04/30 职场文书
网站出售协议书范文
2014/10/10 职场文书
物流业务员岗位职责
2015/04/03 职场文书
归途列车观后感
2015/06/17 职场文书
返乡农民工证明
2015/06/24 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python