bootstrap中添加额外的图标实例代码


Posted in Javascript onFebruary 15, 2017

说明

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

示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
   <title>Bootstrap 101 Template</title>
   <!-- Bootstrap -->
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->
  </head>
  <body>
  <div class="container">
   <div class="form-group has-success has-feedback">
   <label class="control-label" for="inputSuccess2">Input with success</label>
   <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
   <span id="inputSuccess2Status" class="sr-only">(success)</span>
   </div>
   <div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
   <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
   <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
   <span id="inputWarning2Status" class="sr-only">(warning)</span>
  </div>
  <div class="form-group has-error has-feedback">
   <label class="control-label" for="inputError2">Input with error</label>
   <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
   <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
   <span id="inputError2Status" class="sr-only">(error)</span>
  </div>
  <div class="form-group has-success has-feedback">
   <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
   <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
   </div>
   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
   <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
  </div>
   </div>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

输出

bootstrap中添加额外的图标实例代码

以上所述是小编给大家介绍的bootstrap中添加额外的图标实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
基于JavaScript实现轮播图原理及示例
Apr 10 #Javascript
js实现模糊匹配功能
Feb 15 #Javascript
js 性能优化之算法和流程控制
Feb 15 #Javascript
微信小程序 常用工具类详解及实例
Feb 15 #Javascript
微信小程序 基础知识css样式media标签
Feb 15 #Javascript
js 性能优化之快速响应的用户界面
Feb 15 #Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 #Javascript
You might like
PHP页面实现定时跳转的方法
2014/10/31 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Python实现字典依据value排序
2016/02/24 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
校三好学生主要事迹
2014/01/11 职场文书
入党自我评价优缺点
2014/01/25 职场文书
工作证明英文模板
2014/10/21 职场文书
英语感谢信范文
2015/01/20 职场文书
外出考察学习心得体会
2016/01/18 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
如何用python清洗文件中的数据
2021/06/18 Python