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实现左右div自适应高度完全相同的代码
Aug 09 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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 输出简单动态WAP页面
2009/06/09 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
信息技术专业个人自我评价
2013/12/11 职场文书
中学生校园广播稿
2014/01/16 职场文书
主办会计岗位职责
2014/03/13 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
离婚财产分配协议书
2014/10/21 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
考研复习计划
2015/01/19 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
无房证明样本
2015/06/17 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书