编程 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 相关文章推荐

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