Editions ENI Livres | Vidéos | e-Formations
La navigation
L’objectif
Bootstrap vous propose d’insérer des barres de navigation dans vos pages web. Ces barres de navigation vont utiliser la classe .nav, avec pour chaque lien du menu de navigation, soit une liste <ul>, soit des éléments <a>. Comme la classe .nav utilise le module CSS3 Flexbox, elle peut bénéficier de tous les avantages de cette mise en forme et de cette mise en page.
Les exemples à télécharger sont dans le dossier 10-Navigation-01.
Une barre de navigation simple
1. Une navigation avec une liste
Pour ce premier exemple, vous allez créer une barre de navigation qui utilisera une liste <ul> pour insérer les liens du menu de navigation. Dans la liste, un élément <a> sera inclus dans chaque élément <li> pour créer le lien du menu de navigation.
Voici le code de l’exemple :
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Lien 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 3</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Lien 4</a>
</li>
</ul> Voici l’affichage obtenu :
Étudions la structure de cet exemple.
La barre de navigation est insérée dans un élément <ul>, avec la classe .nav. Chaque item du menu de navigation est dans un élément...
Les alignements
Par défaut, la barre de navigation est alignée sur la gauche de son conteneur. Comme la classe .nav utilise Flexbox, vous pouvez modifier l’alignement.
La classe supplémentaire .justify-content-center appliquée à l’élément <nav> permet de centrer la barre de navigation : <nav class="nav justify-content-center">. La colonne utilise la classe supplémentaire .border, les bordures permettent de mieux visualiser les alignements.
Voici le code :
<div class="col border">
<nav class="nav justify-content-center">
<a class="nav-link" href="#">Lien 1</a>
<a class="nav-link" href="#">Lien 2</a>
<a class="nav-link" href="#">Lien 3</a>
<a class="nav-link" href="#">Lien 4</a>
</nav>
</div> Voici l’affichage obtenu :
La classe supplémentaire .justify-content-end appliquée à l’élément <nav> permet d’aligner à droite la barre de navigation : <nav class="nav justify-content-end">.
Voici l’affichage obtenu :
La classe supplémentaire...
Les options de mise en forme
1. Une barre de navigation avec des onglets
Bootstrap vous propose plusieurs classes supplémentaires pour mettre en forme les barres de navigation. La classe .nav-tabs permet d’afficher les liens sous forme d’onglets. Le rendu est meilleur avec une structure utilisant une liste <ul> :
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Lien 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 4</a>
</li>
</ul> Voici l’affichage obtenu :
2. Utiliser des boutons
La classe .nav-pills permet d’afficher les liens sous forme de boutons. Vous pouvez utiliser une structure avec une liste <ul> (<ul class="nav nav-pills">) ou une structure avec des éléments <a>.
Voici le code avec...
Une barre de navigation flexible
Comme la classe .nav est basée sur Flexbox, vous pouvez créer des barres de navigation qui s’adaptent à la taille de l’écran de diffusion.
Voici le code de l’exemple :
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="nav-link active" href="#">Lien 1</a>
<a class="nav-link" href="#">Lien 2</a>
<a class="nav-link" href="#">Lien 3</a>
<a class="nav-link" href="#">Lien 4</a>
</nav> L’élément <nav> utilise la classe .flex-column pour indiquer que par défaut, les éléments enfants doivent s’afficher en colonne, les uns sous les autres. Puis, la classe .flex-sm-row indique que les éléments doivent s’afficher en ligne pour les petits écrans et les écrans de largeur supérieure. C’est donc cette règle qui s’applique sur les écrans de petite taille et les écrans plus grands. Pour les écrans très petits, dont la largeur est inférieure à 576 pixels, c’est l’affichage vertical qui est utilisé.
Voici l’affichage sur un petit écran et sur un écran de taille supérieure...
Une barre de navigation avec un bouton déroulant
Vous pouvez intégrer des boutons déroulants (cf. chapitre Les boutons) dans une barre de navigation.
Voici le code de l’exemple :
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Lien 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
href="#" role="button" aria-haspopup="true"
aria-expanded="false">Lien 2</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Lien 3</a>
<a class="dropdown-item" href="#">Lien 4</a>
<a class="dropdown-item" href="#">Lien 5</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 6</a>
</li>
<li...