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 Ajax使用 全解析
Dec 15 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
js实现音乐播放控制条
Sep 09 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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验证码实现代码
2014/05/10 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python中标准模块importlib详解
2017/04/16 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
Python列表list操作相关知识小结
2020/01/29 Python
keras多显卡训练方式
2020/06/10 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
自荐信范文
2013/12/10 职场文书
授权委托书格式模板
2014/04/03 职场文书
初中新生军训方案
2014/05/13 职场文书
2014年村官工作总结
2014/11/24 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书