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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
详解vuex的简单使用
Mar 12 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
webpack常用配置总览(小结)
Nov 18 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实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
简述DNS进行域名解析的过程
2013/12/02 面试题
教育局长自荐信范文
2013/12/22 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
考博专家推荐信
2014/05/10 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python