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根据时间生成m位随机数最大13位
Oct 30 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
详解vue slot插槽的使用方法
Jun 13 Javascript
Vue渲染函数详解
Sep 15 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
JS中的BOM应用
Feb 02 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 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
SONY SRF-M100的电路分析
2021/03/02 无线电
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
php时间不正确的解决方法
2008/04/09 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
php数据库备份还原类分享
2014/03/20 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
微信小程序入门教程
2016/11/18 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
Python中DJANGO简单测试实例
2015/05/11 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python将list转为matrix的方法
2018/12/12 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
项目经理的岗位职责
2013/11/23 职场文书
高三学习决心书
2014/03/11 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
本溪关门山导游词
2015/02/09 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers