Bootstrap - Navbar

La navbar est l'une des principales caractéristiques des sites Bootstrap. Les navbars sont des composants 'méta' sensibles qui servent d'en-têtes de navigation pour votre application ou votre site. Les barres de navigation s'effondrent dans les vues mobiles et deviennent horizontales lorsque la largeur de la fenêtre de vue disponible augmente. À sa base, la navbar inclut le style pour les noms de site et la navigation de base.

Navbar  par défaut :

Pour créer un navbar par défaut -

• Ajoutez les classes .navbar, .navbar-default à la balise <nav>.

• Ajouter role = "navigation" à l'élément ci-dessus, pour faciliter l'accessibilité.

• Ajoutez une classe d'en-tête .navbar-header à l'élément <div>. Incluez un élément <a> avec la classe navbar-brand. Cela donnera au texte une taille légèrement plus grande.

• Pour ajouter des liens à la navbar, il suffit d'ajouter une liste non ordonnée avec les classes .nav, .navbar-nav.

L'exemple suivant montre ceci –

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">

      <a class = "navbar-brand" href = "#"> Web development</a>

   </div>

   <div>

      <ul class = "nav navbar-nav">

         <li class = "active"><a href = "#">HTML</a></li>

         <li><a href = "#">CSS</a></li>

         <li class = "dropdown">

            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">

               Java 

               <b class = "caret"></b>

            </a>

            <ul class = "dropdown-menu">

               <li><a href = "#">jmeter</a></li>

               <li><a href = "#">EJB</a></li>

               <li class = "divider"></li>

               <li><a href = "#"> Lien séparé </a></li>

               <li class = "divider"></li>

               <li><a href = "#"> Un autre lien séparé </a></li>

            </ul>

         </li>

      </ul>

   </div>

</nav>

Voir le résultaten ligne 

Responsive Navbar

Pour ajouter des fonctions réagissant à la navbar, le contenu que vous voulez être effondré doit être enveloppé dans un <div> avec les classes .collapse, .navbar-collapse. La nature d'effondrement est déclenchée par un bouton qui a la classe de .navbar-toggle, puis comporte deux éléments de données. Le premier, data-toggle, est utilisé pour indiquer au JavaScript ce qu'il faut faire avec le bouton, et le second, data-target, indique l'élément à basculer. Ensuite, avec une classe .icon-bar créer ce que nous aimons appeler le bouton hamburger. Cela basculera les éléments qui se trouvent dans .nav-collapse <div>. Pour que cette fonctionnalité fonctionne, vous devez inclure le raccourci Bootstrap

L'exemple suivant montre ceci –

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">

      <button type = "button" class = "navbar-toggle" 

         data-toggle = "collapse" data-target = "#example-navbar-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" href = "#">Web development </a>

   </div>

   <div class = "collapse navbar-collapse" id = "example-navbar-collapse">

      <ul class = "nav navbar-nav">

         <li class = "active"><a href = "#">HTML</a></li>

         <li><a href = "#">CSS</a></li>

         <li class = "dropdown">

            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">

               Java 

               <b class = "caret"></b>

            </a>

            <ul class = "dropdown-menu">

               <li><a href = "#">jmeter</a></li>

               <li><a href = "#">EJB</a></li>

               <li class = "divider"></li>

               <li><a href = "#">Lien séparé</a></li>

               <li class = "divider"></li>

               <li><a href = "#">Autre lien séparé</a></li>

            </ul>

         </li>

      </ul>

   </div>

</nav>

Voir le résultat en ligne 

Formulaires dans Navbar

Au lieu d'utiliser les formulaires par défaut de classe à partir des formulaires Bootstrap, les formulaires qui se trouvent dans la barre de navigation, utilisez la classe .navbar-form. Cela garantit que l'alignement vertical correct de la forme et le comportement effondré dans les fenêtres étroites. Utilisez les options d'alignement (expliquées dans la section d'alignement des composants) pour décider où réside le contenu de la navbar.

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">

      <a class = "navbar-brand" href = "#">Web development </a>

   </div>

   <div>

      <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"> soumettre</button>

      </form>    

   </div>

</nav>

Boutons dans Navbar

Vous pouvez ajouter des boutons en utilisant la classe .navbar-btn aux éléments <button> qui ne résident pas dans un <form> pour les centrer verticalement dans la barre de navigation. .navbar-btn peut être utilisé sur les éléments <a> et <input>.

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">

      <a class = "navbar-brand" href = "#">Web development</a>

   </div>

   <div>

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

  Bouton de soumission </button>

      </form>  

      <button type = "button" class = "btn btn-default navbar-btn">

            Bouton de la barre de navigation </button>

   </div>

</nav>

Texte dans la barre de navigation

Pour envelopper des chaînes de texte dans un élément, utilisez la classe .navbar-text. Ceci est habituellement utilisé avec la balise <p> pour une bonne prise en main et la couleur. L'exemple suivant montre ceci

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">

      <a class = "navbar-brand" href = "#">Web developmentt</a>

   </div>

   <div>

      <p class = "navbar-text">HTML, CSS, Bootstrap</p>

   </div>

</nav>

Non-nav Liens

Si vous souhaitez utiliser les liens standard qui ne sont pas dans le composant de navigation navbar standard, utilisez la classe navbar-link pour ajouter des couleurs appropriées aux options de navbar par défaut et inverses, comme illustré dans l'exemple suivant:

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">

      <a class = "navbar-brand" href = "#">TutorialsPoint</a>

   </div>

   <div>

      <p class = "navbar-text navbar-right">

         Connecter en tant que  

         <a href = "#" class = "navbar-link">Smith</a>

      </p>

   </div>

</nav>

Alignement des composants

Vous pouvez aligner les composants comme les liens de navigation, les formulaires, les boutons ou le texte vers la gauche ou vers la droite dans une barre de navigation en utilisant les classes d'utilitaire .navbar-left ou .navbar-right. Les deux classes ajouteront un flotteur CSS dans la direction spécifiée. L'exemple suivant montre ceci -

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">

      <a class = "navbar-brand" href = "#">Web development</a>

   </div>

   <div>

      <!--Left Align-->

      <ul class = "nav navbar-nav navbar-left">

         <li class = "dropdown">

            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">

               Java 

               <b class = "caret"></b>

            </a>

            <ul class = "dropdown-menu">

               <li><a href = "#">jmeter</a></li>

               <li><a href = "#">EJB</a></li>

               <li class = "divider"></li>

               <li><a href = "#">Lien de séparé</a></li>

               <li class = "divider"></li>

               <li><a href = "#">Autre lien séparé</a></li>

            </ul>

         </li>

      </ul>

      <form class = "navbar-form navbar-left" role = "search">

         <button type = "submit" class = "btn btn-default">

          Bouton d'alignement à gauche </button>

      </form> 

      <p class = "navbar-text navbar-left"> Aligner le texte à gauche </p>

      <!--Right Align-->

      <ul class = "nav navbar-nav navbar-right">

         <li class = "dropdown">

            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">

               Java 

               <b class = "caret"></b>

            </a>

            <ul class = "dropdown-menu">

               <li><a href = "#">jmeter</a></li>

               <li><a href = "#">EJB</a></li>

               <li class = "divider"></li>

               <li><a href = "#">Lien séparé</a></li>

               <li class = "divider"></li>

               <li><a href = "#">Autre lien séparé</a></li>

            </ul>

         </li>

      </ul>

      <form class = "navbar-form navbar-right" role = "search">

         <button type = "submit" class = "btn btn-default">

Bouton d'alignement à droite     </button>

      </form> 

      <p class = "navbar-text navbar-right">Aligner le texte à droite</p>

   </div>

</nav>

Fixer la barre de navigation au sommet

La barre de navigation Bootstrap peut être dynamique dans son positionnement. Par défaut, il s'agit d'un élément de niveau bloc qui prend son positionnement en fonction de son emplacement dans le code HTML. Avec quelques classes d'aide, vous pouvez la placer soit en haut ou en bas de la page, soit vous pouvez faire défiler de façon statique avec la page.

Si vous voulez que la navbar soit fixée au sommet, ajoutez la classe .navbar-fixed-top à la classe .navbar..

Fixer la barre de navigation  au bas

Si vous voulez que la barre de navigation soit fixée au bas de la page, ajoutez la classe .navbar-fixed-bottom à la classe .navbar.

Navette inversée

Pour créer une navbar inversée avec un fond noir et avec du texte blanc, il suffit d'ajouter la classe .navbar-inversée à la classe .navbar .

<<<Précédent                          Debut                               Suivant>>>