Bootstrap3 input输入框插入glyphicon图标的方法


Posted in Javascript onMay 16, 2016

bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站。

Bootstrap3 input输入框插入glyphicon图标的方法

怎么把图标放在输入框的开头??

<div class="form-group has-feedback">
<label class="col-md-2 control-label" for="username">用户名</label>
<div class="col-md-6">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
<input type="text" class="form-control" id="username" name="username" placeholder="用户名" autofocus>
</div>
</div>
<div class="form-group has-feedback">
<label class="col-md-2 control-label" for="password">密 码</label>
<div class="col-md-6">
<i></i>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
<input type="password" class="form-control" id="password" name="password" placeholder="密码">
</div>
</div>

------解决思路----------------------

改样式就好了啊,它是用绝对定位做的,left多少,再改下输入框的padding-left就可以了

------解决思路----------------------

样式修改下呗

form-control-feedback{
right:0 //改称 left:0
}

以上内容是小编给大家介绍的Bootstrap3 input输入框插入glyphicon图标的方法,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站!

Javascript 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
浅谈js原生拖放
Nov 21 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 #Javascript
Javascript基础教程之比较null和undefined值
May 16 #Javascript
javascript对象的相关操作小结
May 16 #Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 #Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 #Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 #Javascript
Bootstrap所支持的表单控件实例详解
May 16 #Javascript
You might like
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python中的闭包函数
2018/02/09 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python requests指定出口ip的例子
2019/07/25 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
日语专业毕业生求职信
2013/12/04 职场文书
文明城市创建标语
2014/06/16 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
个人收入证明模板
2014/09/18 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
初中团支书竞选稿
2015/11/21 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
【2·13】一图读懂中国无线电发展
2022/02/18 无线电