Bootstrap3制作搜索框样式的方法

 更新时间:2016年07月11日 10:18:56   作者:zacker  
这篇文章主要介绍了Bootstrap3制作搜索框样式的方法 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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制作搜索框样式的方法的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注脚本之家!

相关文章

  • 微信小程序onLaunch异步,首页onLoad先执行?

    微信小程序onLaunch异步,首页onLoad先执行?

    这篇文章主要介绍了微信小程序onLaunch异步,首页onLoad先执行? 文章底部给大家介绍了小程序_onLaunch异步回调数据加载问题的两种解决方案,需要的朋友可以参考下
    2018-09-09
  • 一步步教你利用Canvas对图片进行处理

    一步步教你利用Canvas对图片进行处理

    这篇文章主要给大家介绍了关于利用Canvas对图片进行处理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • JavaScript实现异步获取表单数据

    JavaScript实现异步获取表单数据

    这篇文章主要为大家详细介绍了JavaScript实现异步获取表单数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • JavaScript中防抖和节流的原理和区别详解

    JavaScript中防抖和节流的原理和区别详解

    JavaScript 中,防抖和节流是一种用于优化事件处理函数调用频率的技术,防抖和节流的目的都是为了避免频繁地触发事件处理函数,从而减少浏览器和服务器的负担,本文将给大家介绍一下JavaScript中防抖和节流的原理和区别,需要的朋友可以参考下
    2023-09-09
  • javascript中eval函数用法分析

    javascript中eval函数用法分析

    这篇文章主要介绍了javascript中eval函数用法,实例分析了javascript中eval函数的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 不间断循环滚动效果的实例代码(必看篇)

    不间断循环滚动效果的实例代码(必看篇)

    下面小编就为大家带来一篇不间断循环滚动效果的实例代码(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 深入浅出聊一聊js中的'this'关键字

    深入浅出聊一聊js中的'this'关键字

    js中的this关键字平时在开发中使用时倒是也能正常应用,但是对其使用和判断并不能信手拈来,所以下面这篇文章主要给大家介绍了关于js中this关键字的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 常见的浏览器存储方式(cookie、localStorage、sessionStorage)

    常见的浏览器存储方式(cookie、localStorage、sessionStorage)

    今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie、webStorage(localStorage和sessionStorage)。本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-05-05
  • es6数组includes()用法实例分析

    es6数组includes()用法实例分析

    这篇文章主要介绍了es6数组includes()用法,结合实例形式分析了es6数组includes()针对给定值判断的相关操作技巧与使用注意事项,需要的朋友可以参考下
    2020-04-04
  • js replace替换所有匹配的字符串

    js replace替换所有匹配的字符串

    这篇文章主要介绍了js replace替换所有匹配的字符串,需要的朋友可以参考下
    2014-02-02

最新评论