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 12 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
angular十大常见问题
Mar 07 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
js实现拖拽元素选择和删除
Aug 25 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运行环境配置的详解
2013/06/04 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
JS实现多选框的操作
2020/06/24 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Django web框架使用url path name详解
2019/04/29 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
美术课外活动总结
2014/07/08 职场文书
法制教育演讲稿
2014/09/10 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
公司酒会主持词
2015/07/02 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
56句经典英文座右铭
2019/08/09 职场文书