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图片实时加载提供网页打开速度
Sep 11 Javascript
Javascript window对象详解
Nov 12 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
百度地图自定义控件分享
Mar 04 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
简单的渐变轮播插件
Jan 12 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
原生js实现滑块区间组件
Jan 20 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上传、管理照片示例
2006/10/09 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php反射应用示例
2014/02/25 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
五步轻松实现zTree的使用
2017/11/01 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
详解【python】str与json类型转换
2019/04/29 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
大一自我鉴定范文
2013/10/04 职场文书
护士求职推荐信范文
2013/11/23 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
防灾减灾活动总结
2014/08/30 职场文书
同意迁入证明模板
2014/10/26 职场文书
酒会邀请函
2015/01/31 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python