Bootstrap3制作搜索框样式的方法


Posted in Javascript onJuly 11, 2016

Bootstrap3中的很多样式,都是需要我们进行摸索着学习的,在制作类似百度的素搜索框时,一开始会不知道怎么做,其实很简单,利用内联图标方式就可以实现

<div class="input-group">
<input type="text" class="form-control input-lg"><span class="input-group-addon btn btn-primary">搜索</span>
</div>

通过'.input-group'将span内联到输入框,我们只需要在这个span上面加上按钮的样式,就可以实现一个很不错的搜索框。

以上所述是小编给大家介绍的Bootstrap3制作搜索框样式的方法的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木!

Javascript 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
javascript简单链式调用案例分析
May 10 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 #Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 #Javascript
Bootstrap实现弹性搜索框
Jul 11 #Javascript
Summernote实现图片上传功能的简单方法
Jul 11 #Javascript
JavaScript中setter和getter方法介绍
Jul 11 #Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 #Javascript
仿百度换肤功能的简单实例代码
Jul 11 #Javascript
You might like
咖啡的植物学知识
2021/03/03 咖啡文化
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
python抓取网页中的图片示例
2014/02/28 Python
Python 递归函数详解及实例
2016/12/27 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
老生常谈python中的重载
2018/11/11 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python3爬虫学习入门教程
2018/12/11 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python对excel的基本操作方法
2021/02/18 Python
家居饰品店创业计划书
2014/01/31 职场文书
颁奖典礼主持词
2014/03/25 职场文书
明星员工获奖感言
2014/08/14 职场文书
工人先进事迹材料
2014/12/26 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
同意离婚答辩状
2015/05/22 职场文书
电影雨中的树观后感
2015/06/15 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers