Comment ajouter une boîte de recherche avec icône à la barre de navigation dans Bootstrap 3 ?

Question

J'utilise le nouveau Twitter Bootstrap 3, et j'essaie de placer une boîte de recherche comme ceci (ci-dessous) dans la barre de navigation supérieure :

Dans Bootstrap 2, cela aurait pu être fait comme ceci :

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

Mais je ne suis pas sûr de pouvoir produire la même chose dans Bootstrap 3, car beaucoup de choses ont changé.

Le HTML par défaut pour le formulaire de la boîte de recherche de la barre de navigation dans Bootstrap 3 est le suivant :

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

Comment puis-je le modifier pour obtenir ce dont j'ai besoin ?

Answer 1

J'utilise BS3 sur un site de développement et ce qui suit produit l'effet/la mise en page que vous demandez. Bien sûr, vous aurez besoin des glyphicons configurés dans 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>

MISE À JOUR : Voir JSFiddle

Answer 2

C'est ce que j'ai pu obtenir de plus proche sans ajouter de CSS personnalisé (ce que j'avais déjà compris au moment de poser la question ; je suppose que je dois m'en tenir à cela) :

Et le balisage utilisé :

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

PS : Bien sûr, cela peut être corrigé en ajoutant un négatif. margin-left (-4px) sur le bouton, et la suppression de l'option border-radius sur les côtés input y button rencontre. Mais le but de cette question est de faire en sorte que cela fonctionne sans CSS personnalisé.

Answer 3

Vous pouvez utiliser l'exemple des boutons segmentés 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>

Answer 4

Récemment, j'ai implémenté ce type de fonctionnalité sur mon site de petites annonces en utilisant bootstrap 3.0. Vous pouvez trouver le code complet sur . J'espère que cela vous sera utile

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

Answer 5

J'ai essayé le code de @PhilNicholas et j'ai eu le même problème que @its_me a dit dans les commentaires que la barre de recherche s'affiche sur la ligne suivante de la barre de navigation, et j'ai trouvé que form il faut ajouter un attribut 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>