Le Navbar bootstrap

Avec le framework bootstrap, on peut rendre responsive facilement notre barre de navigation en l’affichant sur toute la largeur de l’écran et lorsque qu’une taille d’écran minimale est atteinte, cette barre change de présentation pour n’afficher que le menu en cours avec un bouton pour déplier sur la verticale le menu.

Grâce à cette technique, l’affichage de la barre est adapté aux écrans plus petits, comme les smartphones.

Les bases

Voici ce que vous devez savoir avant de commencer l’intégration d’un navbar bootstrap :

  • Le navbar nécessite une classe conteneur .navbar et une classe qui va gérer les thèmes
    ( ou les couleurs )
  • Le navbar et son contenu prend par défaut toute la largeur de l’écran. Il faudra utiliser les classes layout de bootstrap pour gérer sa largeur.
  • Pour aligner les menus il faudra utiliser les classes .pull-*-left et .pull-*-right.

Les éléments constitutives du Navbar

  • .navbar-brand contient généralement le logo de votre entreprise ( avec un lien qui doit logiquement pointer sur la homepage )
  • .navbar-nav va contenir le menu principal et les sous menus
  • .navbar-toggler est l’élément qui va s’afficher seulement sur mobile et qui va déployer ou cacher le navbar.

Voici un exemple de menu de style par defaut avec la classe navbar-light

un exemple de menu de style par defaut

Thèmer le navbar

Thémer la barre de navigation n’a jamais été aussi facile car on joue simplement sur les types de classe employé navbar-dark ou navbar-light, sinon on ajoutera directement les attributs couleurs sur le menu.

Thèmer le navbar

La position du navbar

Le navbar par défaut est positionné statiquement, mais il peut être adapté selon nos besoins :
- Position fixe top (fixer le navbar en haut de la page )
- Position fixe bottom (fixer le navbar en bas de la page )

Et tous cela se fait simplement en jouant avec les classes : navbar-full, navbar-fixed-top, navbar-fixed-bottom

Le menu mobile

Le déploiement du menu sur mobile peut être gérer directement par bootstrap à l’aide d’un bouton ou un lien href comme ceci :

Le menu mobile

Répondre