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应该怎样学
Apr 16 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
js获取页面description的方法
May 21 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 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函数file_get_contents超时处理的方法详解
2013/06/03 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
selenium自动化测试入门实战
2020/12/21 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
酒吧员工的岗位职责
2013/11/26 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
在职证明书模板
2015/06/15 职场文书
责任书格式
2019/04/18 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
Vue3.0 手写放大镜效果
2021/07/25 Vue.js