Bootstrap实现弹性搜索框


Posted in Javascript onJuly 11, 2016

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

接下来通过本文给大家介绍Bootstrap实现弹性搜索框的代码,一起看下吧。

<form action="" method="get" class="form-horizontal">
<div class="input-group search-input-group">
<input type="hidden" name="scope" value="1">
<input name="key" autocomplete="off" type="text" class="form-control" placeholder="输入要搜索的内容关键字" >
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button> 
</span>
</div>
</form>

对应的CSS:

.search-input-group .input-group-addon{
background: white !important; 
}
.search-input-group .form-control{
border-right:0; 
box-shadow:0 0 0; 
border-color:#ccc;
}
.search-input-group{
width: 40%;
}
.search-input-group button{
border:0;
background:transparent;
}
.search-input-group input:focus + button{
z-index:3;
}
.search-input-group input{
-webkit-transition: width 0.2s ease-in-out;
-moz-transition:width 0.2s ease-in-out;
-o-transition: width 0.2s ease-in-out;
transition: width 0.2s ease-in-out;
}
.search-input-group input:focus{
width: 500px;
}

若想把搜索图标放到输入框的前面,bootstrap其实是不支持的,需要自己定制一下。

http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input

以上所述是小编给大家介绍的Bootstrap实现弹性搜索框的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站!

Javascript 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 #Javascript
JavaScript中setter和getter方法介绍
Jul 11 #Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 #Javascript
仿百度换肤功能的简单实例代码
Jul 11 #Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 #Javascript
全面理解闭包机制
Jul 11 #Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 #Javascript
You might like
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
EM算法的python实现的方法步骤
2018/01/02 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
美国渔具店:FishUSA
2019/08/07 全球购物
应届大学生求职信
2013/12/01 职场文书
大学生求职自我评价
2014/01/16 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
保密工作整改情况汇报
2014/11/06 职场文书