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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
小程序自定义轮播图圆点组件
Jun 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
ftp类(myftp.php)
2006/10/09 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Django视图、传参和forms验证操作
2020/07/15 Python
详解Python中的Lock和Rlock
2021/01/26 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
自荐信格式技巧有哪些呢
2013/11/19 职场文书
生产部管理制度
2014/01/31 职场文书
终止劳动合同协议书
2014/04/14 职场文书
爱情保证书大全
2014/04/29 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
经理岗位职责
2015/02/02 职场文书
质量保证书怎么写
2015/02/27 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript