Nous allons dans cette leçon passer en revue chacun de ces composants et créer une barre de navigation complète.
Présentation des barres de navigation Bootstrap et de la classe .navbar
Pour créer une barre de navigation avec Bootstrap, on va déjà devoir ajouter une classe .navbar à un élément qui va servir de conteneur à notre barre de navigation (généralement un élément nav ou div).
Les barres de navigation Bootstrap ont une taille fluide par défaut, c’est-à-dire qu’elles vont occuper tout l’espace disponible et se redimensionner en même temps que la fenêtre.
Nous allons ensuite pouvoir ajouter différents composants à notre barre de navigation comme un nom de marque, un menu, un champ de recherche, etc. Ces composants vont être mis en forme grâce aux classes suivantes :
- La classe
.navbar-brandpour le nom de la marque ; - La classe
.navbar-navpour le menu de navigation ; - La classe
.form-inlinepour ajouter un champ de formulaire (champ de recherche par exemple) ; - La classe
.navbar-textpour ajouter tout autre texte.
En plus de cela, les classes .navbar-expand{-sm|-md|-lg|-xl} utilisées avec .navbar-toggler, .collapse et .navbar-collapse vont nous permettre de changer l’apparence de notre barre de navigation en fonction de la taille de la fenêtre pour proposer une meilleure ergonomie.
Le composant nom de marque et la classe .navbar-brand
On va utiliser la classe .navbar-brand pour appliquer des styles à un nom de marque dans une barre de navigation. On va pouvoir ajouter cette classe à la plupart des éléments HTML.
See the Pen
Bootstrap 4.3.1 by Pierre (@pierregiraud)
on CodePen.
Le composant menu et la classe .navbar-nav
La classe .navbar-nav va avoir un rôle similaire à la classe .nav vue précédemment. Par défaut, le menu créé va s’afficher en colonne.
On va pouvoir ajouter une classe .navbar-expand à l’élément portant la classe .navbar pour afficher le menu en ligne. Notez que cette classe possède des variations responsive avec .navbar-expand{-sm|-md|-lg|-xl} pour appliquer différentes mises en forme à notre barre de navigation en fonction de la taille de la fenêtre.
Avec .navbar-expand-md par exemple le menu s’affichera en colonne pour toutes les tailles de fenêtre jusqu’à 768px puis en ligne ensuite.
See the Pen
Bootstrap 4.3.2 by Pierre (@pierregiraud)
on CodePen.
On va également pouvoir ajouter un menu déroulant à notre barre de navigation en utilisant les classes .dropdown-* :
See the Pen
Bootstrap 4.3.3 by Pierre (@pierregiraud)
on CodePen.
Le composant champ de formulaire et la classe .form-online
On va encore pouvoir ajouter des champs de formulaire et particulièrement un champ de recherche dans notre barre de navigation grâce à la classe .form-online.
Pour que ce champ de recherche s’affiche à droite de la barre de navigation, on va pouvoir ajouter .mr-auto à notre menu.
Avec beaucoup d’éléments dans notre barre de navigation, l’affichage risque de ne pas être optimal pour les petits écrans. Pas d’inquiétude, nous allons voir comment remédier à cela dans la suite de cette leçon.
See the Pen
Bootstrap 4.3.4 by Pierre (@pierregiraud)
on CodePen.
Note : dans l’exemple ci-dessus, on se contente de créer le champ de recherche d’un point de vue visuel. Bien évidemment, pour que la recherche soit fonctionnelle, il faudra créer le script de recherche associé.
Le composant texte et la classe .navbar-text
Enfin, on va également pouvoir ajouter du texte dans notre barre de navigation en utilisant la classe .navbar-text.
See the Pen
Bootstrap 4.3.5 by Pierre (@pierregiraud)
on CodePen.
Créer une barre de navigation responsive
Par défaut, les barres de navigation possèdent une taille fluide, ce qui fait qu’elles rétrécissent ou s’étendent en même temps que la fenêtre.
On voudra cependant souvent aller plus loin dans l’adaptabilité de la barre et par exemple cacher le texte du menu sur des petits écrans et proposer à la place une icône permettant d’ouvrir ou de fermer le menu.
Pour faire cela, on va déjà devoir ajouter une classe .navbar-expand{-sm|-md|-lg|-xl} à l’élément portant la classe .navbar. La classe .navbar-expand-* va nous permettre d’indiquer à partir de quelle taille de fenêtre tous les textes de notre barre de navigation doivent être affichés.
Ensuite, on va utiliser les classes .collapse et .navbar-collapse autour des textes qu’on souhaite cacher pour les petites fenêtres et .navbar-toggler et .navbar-toggler-icon pour afficher / cacher ces textes sur petit écran lors d’un clic sur l’icône « burger » affichée grâce à la classe .navbar-toggler-icon.
Code :
See the Pen
Bootstrap 4.3.6 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 4.3.6 by Pierre (@pierregiraud)
on CodePen.
Définir la couleur de la barre de navigation
Bootstrap met également deux classes à notre disposition afin de modifier les couleurs des textes de notre barre de recherche.
La classe .navbar-dark va définir une couleur de texte claire. L’idée à retenir ici est que .navbar-dark doit être utilisée avec des couleurs de fond foncées. A l’inverse, la classe .navbar-light va définir une couleur de texte foncée et va être utilisée avec des couleurs de fond claires.
See the Pen
Bootstrap 4.3.7 by Pierre (@pierregiraud)
on CodePen.
