css - horizontal - navbar-brand
Icono de búsqueda de barra de navegación Bootstrap (9)
Aquí se explica cómo usar :before pseudo selector y los glifos para Bootstrap 2.3.2 en lugar de una imagen de fondo en la entrada.
Aquí hay un par de ejemplos simples: 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> Actualización para Bootstrap 3.0.0
Aquí hay un violín actualizado para bootstrap 3.0: http://jsfiddle.net/66Ynx/
Los ejemplos de arranque para el formulario de búsqueda de la barra de navegación tienen solo un cuadro de texto.
Me gustaría poder agregar un icono de búsqueda al principio, como lo hace Twitter en su cuadro de búsqueda. ¿Cómo puedo hacer esto con bootstrap?
Esto es lo que he intentado hasta ahora pero está fallando: http://jsfiddle.net/C4ZY3/3/
Debes cambiar tu enfoque. Utilice span.search-query como superposición: aquí tiene las cosas más importantes:
.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 */
En bootstrap 3.xx
<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>
Juega este violín, puse algo de resina en la proa para ti: 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…"><span class="fornav"><i class="icon-search"></i></span>
</div>
</form>
</div>
</div>
</div>
La nueva versión 2.1.1 soluciona el problema. No maneja el caso del radio de 15 píxeles, así que seguí adelante y lo diseñé en consecuencia. También agregué navbar-inverse por diversión.
Un par de advertencias. El CSS se puede optimizar mejor, pero recientemente me he echado a perder por menos. Finalmente, hay un borde izquierdo muy leve, apenas visible a la izquierda de la lupa. No sé exactamente qué lo está causando, pero es probable que sea la sombra de la caja.
Por favor, siéntase libre de tenedor y mejorar.
Para quienes usan Rails, mi solución no es la más bella, pero funciona.
<%= 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 %>
Tampoco puede tocar el CSS en absoluto usando entradas de formularios que se aproximan, como
<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>
Tenga en cuenta que el espacio en blanco entre </span> y <input> creará un espacio entre el icono y el cuadro de texto.
Un poco tarde para la fiesta en este ...
Usé lo siguiente para lograr la entrada de búsqueda como un ícono
<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>
Una de las formas de hacerlo es agregar relleno izquierdo al campo y agregar una imagen de fondo para el campo.
Ver ejemplo: http://jsfiddle.net/hYAEQ/
No es la forma exacta en que lo hace twitter.com, usaron el elemento de posición absoluta sobre el campo de búsqueda porque tienen todas las imágenes en el sprite único y no pueden usarlas fácilmente como fondos, pero debería funcionar.
Utilicé una imagen en línea para un fondo para que sea más fácil publicarlo en jsfiddle, pero puede usar enlaces normales a las imágenes aquí.
EDITAR: La forma de hacerlo usando sprite bootstrap y contenedor adicional para el icono http://jsfiddle.net/hYAEQ/2/
EDICION 2:
Solución para el tema de arranque blanco: http://jsfiddle.net/hYAEQ/273/
EDIT 3:
Si está utilizando navbar-inverse (barra de navegación negra), querrá este pequeño ajuste: http://jsfiddle.net/hYAEQ/410/
.navbar-search .search-query {
padding-left: 29px !important;
}