Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法


Posted in Javascript onJune 23, 2016

今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天,后来找到了实现思路,下面小编把我的想法及实现过程分享给大家,有问题欢迎提出,共同学习进步!

Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

实现思路:

实现效果图

Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

自己往里面加入bootstrap的栅格布局代码,控制在不同分辨率下面的排布情况。

这样实现唯一的前提条件就是你的验证码图片高度需要和input框的高度一样(input框的高度大概是34px)。

之后就简单了,让验证码图片重叠在input框上面,使用绝对布局就可以完成。

PS:记住要给input框加上一个padding-left值(略微大于你的验证码宽度即可),不然会挡住文字。

<style>
#captcha {
border-radius: 2px;
cursor: pointer;
position: absolute;
z-index: 3;
left: 0;
top: 0;
}

#validateCode {
padding-left: 110px;
}
</style>
<div class="form-group col-md-6">
<label for="validateCode">验证码
<small>  点击图片刷新验证码</small>
</label>
<div class="input-group">
<img id="captcha"
src='data:image/png;base64,{{Captcha::doimg()['imgCode']}}'>
<input type="text" class="form-control"
id="validateCode" name="validateCode"
placeholder="四位字符验证码">
</div>
</div>

给题主看看我的解决办法,这是我在写的一个网站,图片的大小是契合Input框的高度的,无需更改input宽度,让验证码图片遮住input框即可,然后给input加一个padding-left值,大小略大于验证码图片宽度即可,手机答题不方便,回去再细说。

以上所述是小编给大家介绍的Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
JS使用JSON作为参数实例分析
Jun 23 #Javascript
浅析Bootstrap表格的使用
Jun 23 #Javascript
浅析Bootstrap验证控件的使用
Jun 23 #Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 #Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 #Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 #Javascript
每日十条JavaScript经验技巧(二)
Jun 23 #Javascript
You might like
php防注
2007/01/15 PHP
php跨站攻击实例分析
2014/10/28 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
配置nginx负载均衡
2022/05/06 Servers