88 votos

¿Cómo añadir un cuadro de búsqueda con icono a la barra de navegación en Bootstrap 3?

Estoy usando el nuevo Twitter Bootstrap 3, y estoy tratando de colocar un cuadro de búsqueda como este (abajo) en la parte superior de la barra de navegación :

Navbar Search

En Bootstrap 2, podría haberse hecho así:

<form class="form-search" method="get" id="s" action="/">
    <div class="input-append">
        <input type="text" class="input-medium search-query" name="s" placeholder="Search" value="">
        <button type="submit" class="add-on"><i class="icon-search"></i></button>
    </div>
</form>

Pero no estoy seguro de cómo producir lo mismo en Bootstrap 3 ya que muchas cosas han cambiado.

El HTML por defecto para el formulario de la caja de búsqueda de la barra de navegación en Bootstrap 3 es:

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

¿Cómo lo modifico para lograr lo que necesito?

154voto

PhilNicholas Puntos 1666

Estoy corriendo BS3 en un sitio de desarrollo y lo siguiente produce el efecto/diseño que estás solicitando. Por supuesto que necesitarás los glifos establecidos en BS3.

<div class="navbar navbar-inverse navbar-static-top" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" rel="home" href="http://stackoverflow.com/" title="Aahan Krish's Blog - Homepage">ITSMEEE</a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav">
            <li><a href="http://stackoverflow.com/topic/notes/">/notes</a></li>
            <li><a href="http://stackoverflow.com/topic/dev/">/dev</a></li>
            <li><a href="http://stackoverflow.com/topic/good-reads/">/good-reads</a></li>
            <li><a href="http://stackoverflow.com/topic/art/">/art</a></li>
            <li><a href="http://stackoverflow.com/topic/bookmarks/">/bookmarks</a></li>
            <li><a href="http://stackoverflow.com/all-topics/">/all</a></li>
        </ul>

        <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>

    </div>
</div>

ACTUALIZACIÓN: Ver JSFiddle

30voto

its_me Puntos 1992

Esto es lo más cercano que pude conseguir sin añadir ningún CSS personalizado (esto ya me lo había imaginado en el momento de hacer la pregunta; supongo que tengo que seguir con esto):

Navbar Search Box

Y el marcado en uso:

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>

P.D: Por supuesto, eso se puede arreglar añadiendo un negativo margin-left (-4px) en el botón, y quitando el border-radius en los lados input y button se encuentran. Pero el punto de esta pregunta es hacer que funcione sin ningún CSS personalizado.

Fixed Navbar Search box

25voto

Vicky Puntos 2492

Recientemente he implementado este tipo de funcionalidad en mi sitio web de clasificados usando bootstrap 3.0. Puedes encontrar el código completo en. Espero que esto le ayude

http://www.technicalkeeda.com/bootstrap/navbar-search-icon-example

enter image description here

19voto

praisegeek Puntos 91

Podrías usar el ejemplo de los botones segmentados de Bootstrap 3:

<form action="" class="navbar-form navbar-right">
   <div class="input-group">
       <input type="Search" placeholder="Search..." class="form-control" />
       <div class="input-group-btn">
           <button class="btn btn-info">
           <span class="glyphicon glyphicon-search"></span>
           </button>
       </div>
   </div>
</form>

2voto

gy8409 Puntos 11

Intenté con el código de @PhilNicholas y obtuve el mismo problema de @its_me dicho en los comentarios que la barra de búsqueda aparece en la siguiente línea de la barra de navegación, y encontré que form es necesario añadir un atributo width .

<form role="search" style="width: 15em; margin: 0.3em 2em;">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
            <button type="submit" class="btn btn-default">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </div>
    </div>
</form>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X