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 可以拖动的DIV(二)
Jun 26 Javascript
JavaScript中的类继承
Nov 25 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
原生js实现购物车功能
Sep 23 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php简单静态页生成过程
2008/03/27 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
基于node实现websocket协议
2016/04/25 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
土木建筑学生自我评价
2014/01/14 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
岗位安全生产责任书
2014/07/28 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2014年科技工作总结
2014/11/26 职场文书
CAD实训总结范文
2015/08/03 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis