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上面加上按钮的样式，就可以实现一个很不错的搜索框

时间： 2024-08-06 23:59:05

Bootstrap3制作搜索框样式的方法的相关文章

Xamarin.Android 制作搜索框

前段时间仿QQ做了一个搜索框样式,个人认为还不错,留在这里给大家做个参考,希望能帮助到有需要的人. 首先上截图(图1:项目中的样式,图2:demo样式): 不多说直接上代码: Main.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi

bootstrap制作搜索框及添加回车搜索事件

下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>bootstrap制作搜索框及添加回车搜索事件</title> 6 7 <link rel="s

网页中制作搜索框中遇到一些小问题

当你在制作一个搜索框加按钮的时候,比如<input class="header-text"/><input type="button" class="header-button"/>这样放置,文本框和按钮不管你怎么调样式也不在同一个位置,这个时候解决方式有两种: 1.外边包一层div,让文本框和按钮float:left,此时文本框和按钮都会紧贴div,也就会出现在同一水平线上的效果 2.待搜索

自定义webkit搜索框样式

好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览器上表现一致... 用过mac的同学应该了解这个情况: 就拿前端观察右上角的搜索框来说,在Windows下和mac下的表现就完全不一样啊,mac下(包括safari和chrome),除了宽度外,你设置的其它样式基本是无效的,这种细长的界面和iOS上的搜索框是一样的,或许苹果认为,搜索框就应该是这样的

Win10系统任务栏显示Cortana搜索框的设置方法

我们都知道Win10系统带有Cortana搜索功能,并且可以进行语音输入,要找文件或者软件程序非常的方便.那么怎么在任务栏上显示Cortana的搜索功能呢?下面就来介绍一下Cortana搜索功能怎么在任务栏上设置打开显示或者关闭. Win10任务栏上Cortana搜索设置打开显示或隐藏的方法 1.右键点击任务栏,找到"Cortana",会发现Cortana搜索功能是被默认隐藏的,我们只需要选择下面两个即可.2."显示Cortana图标"就是只有一个图标,"

有关tp里搜索框的实现方法

1:想实现在搜索框里实现搜索功能. 2首先,在对应的html里绘制表格里增加搜索条和搜索按钮: 3:在html里的搜索功能加上功能: 4:在对应的 控制器里的获取用户信息里添加要搜索的字段,字段在数据库里找 5:测试 完成.

搜索框样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 自制search搜索框组件 </title> <meta name="Generator" content="EditPlu

bootstrap搜索框样式代码及效果

<div class="container"> <div class="input-group"> <input type="text" class="form-control input-lg"><span class="input-group-addon btn btn-primary">搜索</span> </div> </

jQuery带tab切换搜索框样式代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style>* {margin: 0;padding: 0;list-style: none;} .search-hovertree-form {width: 575px;margin: 100px auto;overflow: hidden;} .search-hovertree-for