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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 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
PHP 批量删除 sql语句
2009/06/05 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
python字典基本操作实例分析
2015/07/11 Python
用python实现对比两张图片的不同
2018/02/05 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python安装pil库方法及代码
2019/06/25 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python pip配置国内源的方法
2020/02/14 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
会计毕业生自荐信
2013/11/21 职场文书
奥巴马演讲稿
2014/01/08 职场文书
工会主席岗位责任制
2014/02/11 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
销售求职信范文
2014/05/26 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
高中生军训感言
2015/08/01 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers