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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
React.js入门学习第一篇
Mar 30 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
论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
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
竞选劳动委员演讲稿
2014/04/28 职场文书
精神文明单位申报材料
2014/05/02 职场文书
实名检举信范文
2015/03/02 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电