Navbar de recherche Bootstrap

Question

Les exemples de bootstrap pour le formulaire de recherche de la barre de navigation ont juste une zone de texte.

J'aimerais pouvoir ajouter une icône de recherche au début, comme le fait Twitter dans leur champ de recherche. Comment puis-je faire cela avec bootstrap?

Voici ce que j'ai essayé jusqu'à présent mais ça a échoué: http://jsfiddle.net/C4ZY3/3/

Answer 1

Voici comment utiliser l' :before pseudo sélecteur et glyphicons pour Bootstrap 2.3.2 au lieu d'une image d'arrière-plan sur l'entrée.

Voici quelques exemples 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>

---

Mise À Jour Pour Bootstrap 3.0.0

Voici une mise à jour de violon pour bootstrap 3.0: http://jsfiddle.net/66Ynx/

Answer 2

L'une des façon de le faire est d'ajouter un padding à gauche du champ et ajouter image d'arrière-plan pour le champ.

Voir l'exemple: http://jsfiddle.net/hYAEQ/

Il n'est pas exact façon twitter.com le faire, ils ont utilisé la position absolue de l'élément champ de recherche ci-dessus, car ils ont toutes les images du sprite unique, et ne peut pas facilement les utiliser comme arrière-plan, mais il devrait faire.

Je l'ai utilisé en ligne de l'image pour un arrière-plan pour le rendre plus facile pour les poster sur jsfiddle, mais n'hésitez pas à faire un usage normal des liens vers des images ici.

EDIT: le moyen de Le faire en utilisant bootstrap sprite et conteneur supplémentaire pour l'icône http://jsfiddle.net/hYAEQ/2/

EDIT 2:

Correctif pour le blanc bootstrap thème: http://jsfiddle.net/hYAEQ/273/

EDIT 3:

Si vous utilisez navbar-inverse (noir barre de navigation), vous voulez ce petit tweak: http://jsfiddle.net/hYAEQ/410/

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

Answer 3

Jouez ce violon, je mets de la colophane sur l’arc pour vous: 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

Vous ne pouvez pas non plus toucher les fichiers css en utilisant des entrées de formulaire telles que

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

Notez que les espaces entre </span> et <input> créeront un espace entre l'icône et la zone de texte.

Answer 5

Récemment, j'avais implémenté ce type de fonctionnalité sur mon site Web classifié à l'aide de bootstrap 3.0. Vous pouvez trouver le code complet sur

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