Dans cette leçon nous allons voir comment créer des barres de navigation avec onglet.
Les barres de navigation avec onglet s’apparentent plus à des listes de navigation placer à l’intérieur d’une page qu’à des barres de navigation classiques placées en haut de page pour faire office de menu principal.
Les classes et attributs que nous allons voir dans cette leçon :
- nav-tabs
- nav-pills
- data-bs-toggle= »tab »
- tab-content
- tab-pane
- fade
- nav-pills
- nav-justified
Deux sortes d’onglets sont disponibles :
Les Tabs que l’on crée avec la classe .nav-tabs.
Les Pills que l’on crée avec la classe .nav-pills.
Bootstrap 5 : créer une barre de navigation avec onglet Tabs
Pour créer une barre de navigation avec onglet, nous allons placer dans un conteneur (container) une liste de liens semblable à celle que nous avons vu dans la leçon sur les barres de navigation basique avec quelques différences notables néanmoins.
En premier lieu, nous allons :
- Remplacer dans la balise <ul > la classe navbar-nav par la classe nav-tabs
- Inclure dans la balise <ul > la classe nav-tabs.
<ul class= »nav nav-tabs« >
Nous allons ensuite placer sur chacun des liens l’attribut data-bs-toggle= »tab » pour pouvoir basculer d’un onglet a l’autre lorsqu’on clique dessus.
Nous allons aussi créer une id dans chaque href= »#« pour relier chaque onglet a son contenu. C’est-à-dire le contenu qui apparaît sous chaque onglet lorsqu’on clique dessus.
<a class= »nav-link active » data-bs-toggle= »tab » href= »#intro« >Introduction</a>
Création de la barre de navigation par onglet.
Vous pouvez noter la classe .active sur l’onglet ouvert et le lien 4 qui est désactivé avec la classe .disabled.
Création du contenu correspondant à chaque onglet
Pour ce faire nous allons créer une division avec la balise <div> à laquelle nous allons rajouter la classe tab-content et la classe container pour bien aligner le contenu (marge).
<div class= »tab-content container« >
A l’intérieur de cette balise <div> nous créons une autre balise <div> qui contiendra le contenu du premier onglet.
Nous ajoutons à cette balise l’ID correspondant au premier onglet et la classe tab-pane.
<div id= »intro » class= »tab-pane« >
Il ne nous reste plus qu’à rajouter le contenu du premier onglet.
<div id= »intro » class= »tab-pane active« ><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Nous créons ensuite des <div> pour le contenu de chaque onglet avec l’ID correspondant et la classe tab-pane.
Pour un effet de transition, on peut aussi rajouter la classe fade.
<div id= »ex1″ class= »tab-pane fade« >
Le code complet
Bootstrap 5 : créer une barre de navigation avec onglet Pills
Pour créer une barre de navigation avec des onglets Pills il suffit de remplacer la classe .nav-tabs vue ci-dessus par la classe .nav-pills.
<ul class= »nav nav-tabs« > devient <ul class= »nav nav-pills« >
Changer l’alignement horizontal des onglets sur une barre de navigation ?
Plusieurs classes sont disponibles pour gérer l’alignement horizontal des onglets.
- nav-fill
- La classe nav-fill va étendre la barre de navigation sur toute la largeur disponible.
- Les onglets n’ont pas tous la même largeur.
- Elle se place sur la balise <ul>
- nav-justified
- La class nav-justified va elle aussi étendre la barre de navigation sur toute la largeur, mais à la différence de la classe nav-fill, les onglets auront tous la même largeur.
<ul class= »nav nav-pills nav-justified« >
- justify-content-center
- La classe justify-content-center va centrer tous les onglets.
<ul class= »nav nav-pills justify-content-center« >
- justify-content-end
- La classe justify-content-end permet d’aligner les onglets a gauche.
<ul class= »nav nav-pills justify-content-end« >
Changer la taille des onglets tabs et pill
Pour changer la taille des onglets, on va reprendre les classes de tailles vues dans la leçon sur la typographie de Bootstrap 5.
- Taille d’un titre avec les classe h1,h2,h3,…
- Utilisez les classes display.
- Utiliser la classe small.
- Utiliser les classes fs*.
