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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
js 分栏效果实现代码
Aug 29 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
详解AngularJS 模块化
Jun 14 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
js实现简单进度条效果
Mar 25 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP文件操作实现代码分享
2011/09/01 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
两款万能的php分页类
2015/11/12 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
js实现聊天对话框
2020/02/08 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
python使用selenium实现批量文件下载
2019/03/11 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Pytorch to(device)用法
2020/01/08 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
自我鉴定总结
2014/03/24 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
科学发展观活动总结
2014/08/28 职场文书
大学生自荐材料范文
2014/12/30 职场文书
文体活动总结
2015/02/04 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书