Sommaire

La barre de navigation avec un champ de recherche COMPOSANTS DE NAVIGATION ET DE PAGINATION:Barre de navigation avec un champ de recherche

Avoir un champ de recherche dans une barre de navigation est un élément très commun dans de très nombreux sites Web. Bootstrap nous permet d’en insérer un dans notre barre de navigation. Nous utiliserons un formulaire <form>, une boîte <div>, un élément <input> et un bouton <button>. Tous ces éléments sont mis en forme à l’aide de nombreuses classes CSS dédiées.

Voici le code :

<div class="navbar navbar-default"> 
   <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
         <li><a href="#">Accueil</a></li> 
         <li><a href="#">Projets</a></li> 
         <li><a href="#">Réalisations</a></li> 
         <li><a href="#">Equipe</a></li> 
      </ul> 
      <form class="navbar-form navbar-left" role="search"> 
         <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Recherche"> ...