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自定义事件介绍
Aug 29 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP在线书签系统分享
2016/01/04 PHP
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
深入探讨前端框架react
2015/12/09 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Django之模板层的实现代码
2019/09/09 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
优秀毕业生推荐信
2013/11/02 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
高中班长自我鉴定
2013/12/20 职场文书
二年级学生评语大全
2014/04/23 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2014年电教工作总结
2014/12/19 职场文书
婚礼新人答谢词
2015/01/04 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js