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 相关文章推荐
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
js实现开关灯效果
Mar 30 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
微信小程序使用 vant Dialog组件的正确方式
Feb 21 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+MySql编写聊天室
2006/10/09 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
python实现比较两段文本不同之处的方法
2015/05/30 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
法学院方阵解说词
2014/01/29 职场文书
小学中秋节活动方案
2014/02/06 职场文书
低碳环保倡议书
2014/04/14 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
MySQL分库分表详情
2021/09/25 MySQL
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript