Bootstrap导航栏搜索图标

Question

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

我希望能够在开头添加一个搜索图标，就像Twitter在他们的搜索框中所做的那样。如何使用Bootstrap实现这一点？

以下是我迄今为止尝试过但失败了的内容： http://jsfiddle.net/C4ZY3/3/

- jterrace

---

你最终解决了吗？我一直在同一个问题上碰壁 :/ - Fer Martin

不，我想我会开始一个悬赏。 - jterrace

@FerMartin请查看已接受的答案，以获取一个不错的解决方案。 - jterrace

你应该升级到2.1.1版本。请查看我的回答。 - ATL_DEV

Answer 1

以下是如何在输入框上使用:before伪选择器和字形图标，而不是背景图片，适用于Bootstrap 2.3.2。

这里有几个简单的例子: http://jsfiddle.net/qdGZy/

<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

这里有一个更新的Bootstrap 3.0 fiddle: http://jsfiddle.net/66Ynx/

- JeremyWeir

---

如果您对浏览器支持情况感到好奇...请访问http://css-tricks.com/browser-support-pseudo-elements/ - JeremyWeir

应该选择这个答案！信息很棒。 - professormeowingtons

无需包含图像的外部参考（Bootstrap 3.0）。请使用字体代替。http://jsfiddle.net/CK2EG/1/ - tribe84

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;
}

- Alexey Ivanov

---

这个能修改成使用Bootstrap Sprite吗？ - jterrace

是的，例如像这样：http://jsfiddle.net/hYAEQ/1/。但您需要向表单添加div元素。此外，如果您需要在焦点上更改图标颜色，则需要使用JavaScript从“<div class =”icon-search icon-white“> </ div>”中删除“icon-white”类，然后选择它并在失去焦点时将其放回。（不在示例中） - Alexey Ivanov

你需要进行一些调整。在经典的Bootstrap中，图标是作为背景图片插入的，而在Font Awesome中，它们是通过:before伪元素插入的。因此，你需要将背景部分更改为:before部分。 - Alexey Ivanov

@AlexeyIvanov padding-left: 29px !important; 这里的 !important 是什么意思？ - sharif2008

@sharif 这意味着这个 CSS 规则具有最大的优先级。Bootstrap CSS 中有默认的 CSS 规则，也为该元素设置了 padding-left，我们需要浏览器使用我们的规则而不是默认规则，因此我们使用 !important。通常在 CSS 中使用 !important 不是最佳实践，因为它使代码难以维护。但是在这种情况下，如果我们不想破坏原始 CSS，我们就没有其他选择。 - Alexey Ivanov

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>

- UTCWebDev

---

这是更为简洁的解决方案，因为您可以使用自定义图标；http://fortawesome.github.com/Font-Awesome/请注意，使用left：-22px而不是margin-left：-22px;，并将输入和span标签包装在<nobr>中，即可在有限的宽度区域中使用它，而无需在新行上放置图标。答案加1。 - kirpit

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> 之间添加空格会在图标和文本框之间创建间隙。

- Joseph Le Brech

---

此方法在问题中。 - jterrace

我明白了，我有点走神了，但是去掉空格会让你的解决方案更好一些。 - Joseph Le Brech

我在上面的jsfiddle中删除了空格，但似乎没有改变任何东西。你使用的是更新的bootstrap吗？ - jterrace

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>

- Dario

Answer 6

新版本2.1.1修复了问题。它不能处理15像素半径的情况，所以我对其进行了相应的样式设置。我还添加了navbar-inverse以增加趣味性。

有几个注意事项。CSS可以更好地优化，但最近我被less宠坏了。最后，在放大镜左侧有一个微不足道的、几乎看不见的左边框。我不知道具体是什么原因导致的，但很可能是盒子阴影。

请随意fork并改进。 http://jsfiddle.net/joelrodgers/hYAEQ/333/

- ATL_DEV

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 %>

- Flavio Wuensche

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>

- Dan

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 */

- rybitfa

---

文本仍然覆盖在图标上，搜索框的形状不正确，您的选择器太过于普遍，因为您正在覆盖主要类别，如span3。 - jterrace