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 04 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
JavaScript原型链详解
Nov 07 Javascript
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
第十一节--重载
2006/11/16 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python创建模块及模块导入的方法
2015/05/27 Python
Python网络编程详解
2017/10/31 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
python语音识别实践之百度语音API
2018/08/30 Python
python如何读取bin文件并下发串口
2019/07/05 Python
python绘制多个子图的实例
2019/07/07 Python
简单介绍python封装的基本知识
2019/08/10 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android