Plan du cours
Barre de navigation basique (navbar)
Une barre de navigation basique est créée avec la classe .navbar suivie par la classe responsive à partir de laquelle la barre de navigation va passer de l’horizontale à la verticale .navbar-expand-xl|lg|md|sm.
En général, on rajoute aussi une classe pour la couleur de fond (bg-light pour un fond gris par exemple).
Pour ajouter des liens dans la barre de navigation, on utilise la balise de liste <ul> avec la classe .navbar-nav
<ul class= »navbar-nav« ><ul>
Puis on rajoute les balises <li> avec la classe .navbar-item.
<li class= »nav-item« ><li>
Et pour finir, on place nos balises <a> avec la classe .navbar-link.
<a class= »nav-link » href= »# »>Lien 1<a>
Pour centrer la barre de navigation, nous rajoutons la classe .justify-content-center a la balise .nav
<div class=" bg-light justify-content-center"><div>
Barre de navigation verticale
Pour faire une barre de navigation verticale plutôt qu’horizontale, il suffit simplement de supprimer la classe .navbar-expand-xl|lg|md|sm de la balise .nav.
Horizontal : <nav class= « navbar navbar-expand-sm bg-light justify-content-center »><nav>
Vertical : <nav class= »navbar bg-light »><nav>
Barre de navigation avec une couleur de fond
Un petit rappel des classes qui permettent de choisir une couleur pour le Background :
<p class= »bg-success text-white »>Fond d’ecran vert.>p>
<p class= »bg-info text-white »>Fond d’ecran turquoise.>p>
<p class= »bg-warning text-white »>Fond d’ecran orange.>p>
<p class= »bg-danger text-white »>Fond d’ecran rouge.>p>
<p class= »bg-secondary text-white »>Fond d’ecran gris.>p>
<p class= »bg-dark text-white »>Fond d’ecran noir.>p>
<p class= »bg-light text-dark »>Fond d’ecran gris clair.>p>
*On peut directement mettre le texte en blanc sur tous les liens avec la classe : .navbar-dark ou en noir avec la classe : .navbar-light
Exemple :
Barre de navigation avec un fond noir une couleur de texte blanc, le menu centré et le premier lien désignant la page active :
Si on veut un fond vert avec un texte blanc, on change les classes correspondantes dans la balise <nav>
<nav class= »navbar navbar-expand-sm bg-success navbar-dark justify-content-center><nav>
Barre de navigation avec Logo
Nous allons voir maintenant comment rajouter une marque ou un logo sur une barre de navigation.
Pour ce faire nous allons placer la classe suivante sur une balise <a>
Classe : .navbar-brand
A la place du logo vous pouvez aussi utiliser une image, la classe .navbar-brand ajustera automatiquement la barre de navigation dans sa verticalité (hauteur) pour contenir correctement l’image.
Barre de navigation responsive
Cette barre va cacher les liens du menu sur petit écran et les incruster dans un bouton qui se déploiera lorsque vous cliquerez dessus et fera apparaitre les liens qui se trouvent à l’intérieur.
Avec l’explosion des tablettes et smartphones, la Barre de navigation responsive est presque devenue indispensable si voulez que votre site soit facile d’utilisation sur petit écran.
Les classes et attributs (mises à l’intérieur du bouton):
.navbar-toggler
data-toggle= »collapse »
data-target= »#id »
.navbar-toggler-icon
La liste des liens du menu <ul> seront mis à l’intérieur d’une balise <div> qui contiendra la classe : .collapse navbar-collapse et l’id correspondant à l’id inclus dans data-target= »#id ».
Affichage au-dessus de 768px
Affichage en-dessous de 768px
Barre de navigation responsive avec menu déroulant
Ceci est un peu le récapitulatif de tout ce qu’on a vu jusqu’à présent.
Avant de regarder la solution j’aimerais que vous essayiez de créer la même barre de navigation responsive qu’au-dessus mais que vous rajoutiez en plus au lien Contact un menu déroulant avec 3 liens à l’intérieur (adresse, email, téléphone).
Je vous rappelle les classes et l’attribut pour le menu déroulant :
.nav-item dropdown
.nav-link dropdown-toggle
.dropdown-menu
.dropdown-item
data-toggle= »dropdown » (attribut).
Affichage au-dessus de 768px
Affichage en-dessous de 768px
Bonjour très satisfait de votre publication. Merci
Merci pour l’explication,c’est vrement sympa et tres clair.
bonjour a tous je suis novice ici! deja merci pour le tuto c’est clair et facile! j’ai cpendant une question: sur votre exemple vous avez creer une bar de navigation avec des menus; accueil; projet et contact! disons que je souhaite que le menu contact soit en couleur vert et que le texte soit en black! je precise le menu soit en background vert l text(contact)en black et ceci pas au cliquer