Bootstrap barre de navigation icône de recherche

Le bootstrap des exemples pour la barre de navigation du formulaire de recherche ont simplement une zone de texte.

J'aimerais être en mesure d'ajouter une icône de recherche au début, à l'instar de Twitter sur leur zone de recherche. Comment puis-je faire cela avec bootstrap?

Voici ce que j'ai essayé jusqu'à présent, mais il ne fonctionne pas:
http://jsfiddle.net/C4ZY3/3/

pourriez-vous comprendre en fin de compte? Je suis frapper moi-même avec un mur sur le même problème :/
Non, je pense que je vais commencer un bounty
voir accepté de répondre à une belle solution
Vous devez mettre à jour 2.1.1. Voir ma réponse.

InformationsquelleAutor jterrace | 2012-03-03

css twitter-bootstrap

51

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.

J'ai utilisé d'image en ligne 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;
}
```
- Cela peut-il être modifié pour utiliser la bootstrap sprite?
- Oui, par exemple comme ceci: jsfiddle.net/hYAEQ/1 . Mais vous aurez besoin d'ajouter un élément div pour la forme. Aussi, si vous avez besoin d'icône pour modifier la couleur sur, vous devrez utiliser javascript pour supprimer la classe "icône-blanc" à partir de "<div class="icon-icône de recherche-blanc"></div>" puis de la sélectionner et de le remettre à nouveau sur le flou. (pas dans l'exemple)
- C'est presque parfait! De toute façon de faire de l'icône devient noir lorsque porté? Je peux voir comment le faire facilement avec JS, mais vous ne savez pas comment le faire avec de la pure CSS?
- En fait il y a: jsfiddle.net/hYAEQ/2 (d'abord pensé qu'il n'y est pas). Mais il y a une exigence de l'icône de bloc doit suivre à droite après le champ de recherche. Et il ne changera pas dans IE7 (mais Bootstap n'aurait pas changé bg color ici de toute façon)
- C'est génial. Pouvez-vous mettre à jour la réponse à cela et je vais vous l'accepter?
- Ajout d'exemples pour la réponse.
- J'ai accepté votre réponse, mais on ne peut pas attribuer la prime pour l'autre 11 heures, sera entrants, merci!
- Peut une mise en œuvre semblables, être utilisé pour les polices d'icônes comme font-awesome?
- Vous aurez besoin de faire quelques ajustements. Dans le classique de bootstrap icônes sont insérés les images d'arrière-plan, et en font-awesome ils sont insérés avec :avant de pseudo-élément. SI vous devez modifier l'arrière-plan partie :avant la partie.
- depuis par défaut de la barre de navigation est maintenant blanc, vous pouvez vous débarrasser de la dernière classe css (ou peut-être en commentaire pour que les gens puissent les utiliser qui ont encore du noir), mais le jsfiddle semble un peu étrange aujourd'hui, si vous voulez le mettre à jour
- padding-left: 29px !important; ce qui veut dire !important ??
- Cela signifie que cette règle css ont priorité maximale. Il y a un défaut des règles css de Bootstrap css qui définit également padding-left pour cet élément et nous avons besoin de navigateur pour utiliser notre règle, et non pas la valeur par défaut. Nous utilisons donc !important pour cette raison. Il n'est généralement pas la meilleure pratique à utiliser !important dans le css, car il rend le code plus difficile à maintenir. Mais dans ce cas, nous avons un très petit choix si nous ne voulons pas de gâchis avec l'original css.
InformationsquelleAutor Alexey Ivanov
56

Voici comment utiliser la :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/
- Dans le cas où vous êtes curieux de connaitre la prise en charge du navigateur... css-tricks.com/browser-support-pseudo-elements
- Cela DEVRAIT être la réponse sélectionnée! Grande info.
- Pas besoin d'inclure une référence externe pour l'image (Bootstrap 3.0). Utiliser la police de caractères à la place. jsfiddle.net/CK2EG/1
InformationsquelleAutor JeremyWeir
9

Jouer de ce violon, j'ai mis de la colophane sur la proue, 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>
```
- c'est la solution de nettoyage que vous pouvez utiliser des icônes personnalisées trop; fortawesome.github.com/Font-Awesome notez que left:-22px au lieu de margin-left:-22px; et l'emballage d'entrée et de balises span à l'intérieur d'un <nobr> vous permettra de l'utiliser dans la largeur limitée de la zone, sans renoncer à l'icône sur une nouvelle ligne.. +1 pour la réponse.
InformationsquelleAutor UTCWebDev
4

Vous pouvez également ne pas toucher au css à l'aide ajoutant entrées d'un formulaire comme si
```
<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>
```
Noter que l'espace entre </span> et <input> permettra de créer un écart entre l'icône et la boîte de texte.
- cette méthode est dans la question
- Je vois, j'ai fait un peu de bouclage là, mais en enlevant l'espace serait faire de votre solution un peu plus agréable.
- J'ai enlevé l'espace dans le jsfiddle ci-dessus, mais il ne semble pas de changer quoi que ce soit. Êtes-vous sur une nouvelle bootstrap peut-être?
- ouais, je suis sur la dernière; 2.0
InformationsquelleAutor Joseph Le Brech

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

InformationsquelleAutor Dario

2

La nouvelle version 2.1.1 résout le problème. Il ne gère pas le cas de la 15 pixels de rayon, donc je suis allé de l'avant et de style en conséquence. J'ai également ajouté navbar-inverse pour le plaisir.

Un couple de mises en garde. Le CSS peut être mieux optimisée, mais récemment, j'ai été gâté par moins. Enfin, il y a une très légère, à peine visible, bordure gauche à gauche de la loupe. Je ne sais pas exactement quelle en est la cause, mais il est probable que la zone d'ombre.

N'hésitez pas à fourche et de s'améliorer.

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

InformationsquelleAutor Joel Rodgers

Pour ceux qui utilisent des Rails, ma solution n'est pas la plus belle mais fonctionne.

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

InformationsquelleAutor Flavio Wuensche

Peu en retard pour la partie sur celui-ci ...

J'ai utilisé pour réaliser la saisie de recherche comme une icône

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

InformationsquelleAutor Dan

-1

Vous devriez changer votre approche. Utilisation span.search-query comme une superposition - vous avez ici les choses les plus 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 */
```
- Le texte est toujours au-dessus de l'icône avec cela, la zone de recherche est la forme de mal, et votre sélecteurs sont trop générales, puisque vous êtes l'écrasement principal des classes comme span3
InformationsquelleAutor rybitfa

Vous devez vous connecter pour publier un commentaire.