Bootstrap Navbar значок поиска

Примеры бутстрапов для формы поиска в навигаторе имеют только текстовое поле.

Я хотел бы добавить значок поиска в начале, например, Twitter в окне поиска. Как я могу сделать это с помощью начальной загрузки?

Вот что я пробовал до сих пор, но это не удалось: http://jsfiddle.net/C4ZY3/3/

Ответы

Ответ 1

Один из способов сделать это - добавить левое дополнение к полю и добавить фоновое изображение для поля.

См. пример: http://jsfiddle.net/hYAEQ/

Не точный способ twitter.com сделать это, они использовали элемент абсолютной позиции над полем поиска, потому что у них есть все изображения в одном спрайте и они не могут легко использовать их в качестве фона, но это должно делать.

Я использовал встроенное изображение для фона, чтобы упростить отправку его в jsfiddle, но не стесняйтесь использовать обычные ссылки на изображения здесь.

EDIT: способ сделать это с помощью бутстрап-спрайта и дополнительного контейнера для значка http://jsfiddle.net/hYAEQ/2/

ИЗМЕНИТЬ 2:

Исправить для темы белого бутстрапа: http://jsfiddle.net/hYAEQ/273/

ИЗМЕНИТЬ 3:

Если вы используете navbar-inverse (черный navbar), вам понадобится эта небольшая настройка: http://jsfiddle.net/hYAEQ/410/

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

Ответ 2

Здесь, как использовать псевдо-селектор :before и глификоны для Bootstrap 2.3.2 вместо фонового изображения на входе.

enter image description here

Вот несколько простых примеров: 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

enter image description here

Здесь обновленная скрипка для bootstrap 3.0: http://jsfiddle.net/66Ynx/

Ответ 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>

Ответ 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> создадут промежуток между значком и текстовым полем.

Ответ 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>

Ответ 6

Новая версия 2.1.1 устраняет проблему. Он не справляется с 15-пиксельным радиусом, поэтому я пошел вперед и разработал его соответствующим образом. Я также добавил navbar-inverse для удовольствия.

Несколько предостережений. CSS может быть лучше оптимизирован, но в последнее время я был испорчен меньше. Наконец, там была такая легкая, едва заметная левая граница слева от увеличительного стекла. Я не знаю, что именно вызывает его, но, скорее всего, это тень окна.

Пожалуйста, не стесняйтесь развиваться и улучшаться.

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

Ответ 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 %>

Ответ 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>

Ответ 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 */