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中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
ionic3双击返回退出应用的方法
Sep 17 Javascript
vue自定义组件实现双向绑定
Jan 13 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
帅气的琦玉老师
2020/03/02 日漫
PHP的变量总结 新手推荐
2011/04/18 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
关于js类的定义
2011/06/28 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
python Timer 类使用介绍
2020/12/28 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
教师旷工检讨书
2014/01/18 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
文体活动实施方案
2014/03/27 职场文书
环境科学专业求职信
2014/08/04 职场文书
质检员岗位职责
2015/02/03 职场文书
一年级下册数学教学反思
2016/02/16 职场文书