Question

导航栏搜索表单的bootstrap示例只有一个文本框。

我希望能够在开头添加搜索图标，就像Twitter在搜索框中所做的那样。我怎么能用bootstrap做到这一点？

这是我到目前为止所尝试的但它失败了： http://jsfiddle.net/C4ZY3/3/

Answer 1

以下是如何在 Bootstrap 2.3.2 中使用:before伪选择器和字形，而不是输入中的背景图像。

enter image description here

<style type="text/css">
input.search-query {
    padding-left:26px;
}

form.form-search {
    position: relative;
}

form.form-search:before {
    content:'';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
    background-position: -48px 0;
    position: absolute;
    top:8px;
    left:8px;
    opacity: .5;
    z-index: 1000;
}
</style>

<form class="form-search form-inline">
     <input type="text" class="search-query" placeholder="Search..." />
</form>

<小时/> 更新Bootstrap 3.0.0

enter image description here

这是bootstrap 3.0的更新小提琴：http://jsfiddle.net/66Ynx/

Answer 2

其中一种方法是在字段中添加左边距并为字段添加背景图像。

参见示例：http://jsfiddle.net/hYAEQ/

twitter.com不是这么做的，他们在搜索字段上方使用了绝对位置元素，因为它们在单个精灵中都有所有图像，并且不能轻易地将它们用作背景，但它应该这样做。

我使用内嵌图像作为背景，以便更容易将其发布到jsfiddle，但可以随意使用图像的常规链接。

编辑：使用引导精灵和图标的附加容器来实现它的方法 http://jsfiddle.net/hYAEQ/2/

编辑2：

修复了白色引导主题：http://jsfiddle.net/hYAEQ/273/

编辑3：

如果您使用的是navbar-inverse（黑色导航栏），则需要进行此小调整：http://jsfiddle.net/hYAEQ/410/

.navbar-search .search-query {
    padding-left: 29px !important;
}

Answer 3

玩这个小提琴，我在你的弓上放了一些松香： http://jsfiddle.net/pYRbm/

.fornav {
    position:relative;
    margin-left:-22px;
    top:-3px;
    z-index:2;
}

<div class="navbar">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search">
<div class="input-append">
<input type="text" class="search-query span2" placeholder="Search&hellip;"><span class="fornav"><i class="icon-search"></i></span>
</div>
</form>
</div>
</div>
</div>

Answer 4

你也不能通过使用前置表格输入来触摸css

<form class="navbar-search">
    <div class="input-prepend">
        <span class="add-on"><i class="icon-search"></i></span><input name="url" type="text" class="span2" placeholder="Page Url">
    </div>
</form>

请注意，</span>和<input>之间的空格会在图标和文本框之间产生间隙。

Answer 5

在bootstrap 3.x.x中

<div class="input-group">
  <input type="text" class="form-control" id="search">
  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>

Answer 6

新版本2.1.1解决了这个问题。它不处理15像素半径的情况，所以我继续并相应地设计它。我还添加了navbar-inverse以获得乐趣。

有几点需要注意。 CSS可以更好地优化，但最近我被更少的宠坏了。最后，放大镜左侧有一个非常轻微，几乎看不见的左边框。我不确切知道是什么导致了它，但很可能是盒子阴影。

请随意分叉并改进。

http://jsfiddle.net/joelrodgers/hYAEQ/333/

Answer 7

对于那些使用Rails的人来说，我的解决方案并不是最美丽的，但却有效。

<%= form_tag PATH_TO_MODEL, :method => 'get', :class => "navbar-search" do %>
    <%= text_field_tag :search, params[:search], :class => "search-query",
        :style => "padding-left:29px" %>
    <div class="icon-search" style="position:absolute;top:7px;left:11px;"></div>
<% end %>

Answer 8

在这个派对上迟到了......

我使用以下内容将搜索输入实现为图标

<div class="input-append">
  <input id="appendedInputButton" class="span6" type="text" placeholder="Search...">
  <button class="btn" type="button"><i class="icon-search"></i></button>
</div>

Answer 9

你应该改变你的方法。使用span.search-query作为叠加层 - 在这里您有最重要的事情：

.navbar-search { position: relative } /* wrapper */
.search-query { position: absolute; left: 0; top: 0; z-index: 2; width: x } /* icon */
.span3 { position: relative; z-index: 1; padding-left: x } /* input */

Bootstrap导航栏搜索图标

9 个答案: