编程 Javascript

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制作搜索框样式的方法的全部叙述，希望对大家有所帮助，如果大家想了解更多内容敬请关注三水点靠木！

Bootstrap3制作搜索框样式的方法

- Author -

zacker

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

语义化 H1 标签

Jan 14 Javascript

由document.body和document.documentElement想到的

Apr 13 Javascript

页面版文本框智能提示JS代码

Nov 20 Javascript

jQuery学习笔记之jQuery的事件

Dec 22 Javascript

用js小类库获取浏览器的高度和宽度信息

Jan 15 Javascript

关于include标签导致js路径找不到的问题分析及解决

Jul 09 Javascript

JavaScript设计模式学习之“类式继承”

Mar 12 Javascript

JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】

Apr 19 Javascript

javascript将list转换成树状结构的实例

Sep 08 Javascript

JS实现的简单表单验证功能示例

Oct 13 Javascript

EasyUI的DataGrid绑定Json数据源的示例代码

Dec 16 Javascript

Vue+Koa2 打包后进行线上部署的教程详解

Jul 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

解决GD中文乱码问题

2007/02/14 PHP

php的access操作类

2008/04/09 PHP

Yii把CGridView文本框换成下拉框的方法

2014/12/03 PHP

PHP程序员不应该忽略的3点

2015/10/09 PHP

PHP中的print_r 与 var_dump 输出数组

2016/06/13 PHP

PHP实现的随机IP函数【国内IP段】

2016/07/20 PHP

laravel中的错误与日志用法详解

2016/07/26 PHP

PHP 实现浏览记录并按日期分组

2017/05/11 PHP

PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】

2017/06/07 PHP

Laravel框架执行原生SQL语句及使用paginate分页的方法

2018/08/17 PHP

匹配任意字符的正则表达式写法

2010/04/29 Javascript

Javascript 面向对象编程（一）封装

2011/08/28 Javascript

DWZ刷新dialog解决方法

2013/03/03 Javascript

jQuery中的jQuery()方法用法分析

2014/12/27 Javascript

举例详解AngularJS中ngShow和ngHide的使用方法

2015/06/19 Javascript

jQuery排序插件tableSorter使用方法

2017/02/10 Javascript

详解Webpack DLL用法以及功能

2017/07/11 Javascript

JavaScript实现开关等效果

2017/09/08 Javascript

详解vue-cli项目中的proxyTable跨域问题小结

2018/02/09 Javascript

解决三元运算符报错“SyntaxError: can''t assign to conditional expression”

2020/02/12 Javascript

[34:56]Ti4冒泡赛LGD vs Liquid 1

2014/07/14 DOTA

Python tkinter模块中类继承的三种方式分析

2017/08/08 Python

Python中存取文件的4种不同操作

2018/07/02 Python

Python实现聊天机器人的示例代码

2018/07/09 Python

Python supervisor强大的进程管理工具的使用

2019/04/24 Python

python切片的步进、添加、连接简单操作示例

2019/07/11 Python

对python中的float除法和整除法的实例详解

2019/07/20 Python

python实现快递价格查询系统

2020/03/03 Python

keras用auc做metrics以及早停实例

2020/07/02 Python

moosejaw旗下的户外商品促销网站：Mountain Steals

2017/02/27 全球购物

ECCO爱步官方旗舰店：丹麦鞋履品牌

2018/01/02 全球购物

美国领先的宠物用品和宠物食品零售商：Petco

2020/10/28 全球购物

董事长秘书岗位职责

2013/11/29 职场文书

关于奉献的演讲稿

2014/05/21 职场文书

领导班子群众路线与四风问题对照检查材料思想汇报

2014/10/11 职场文书

实习生辞职信范文

2015/03/02 职场文书