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 item, soit une liste <ul>, soit des éléments <a>. Notez bien que la classe .nav utilise le module CSS3 Flexbox, donc elle peut bénéficier de tous les avantages de cette mise en forme et de cette mise en page.
Le dossier à télécharger pour ces exemples est nommé 10-Navigation-01.
Une barre de navigation simple
1. Une navigation avec une liste
Pour ce premier exemple, nous allons créer une barre de navigation qui utilisera une liste <ul> pour insérer les items de cette navigation.
Voici le code utilisé pour cet exemple :
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Adipiscing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Amet</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 est dans un élément <li> ayant la classe .nav-item. Enfin, le lien est placé comme contenu...
Les alignements
Par défaut la barre de navigation est alignée sur la gauche de son conteneur. Comme la classe .nav utilise Flexbox, nous pouvons 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">.
Voici l’affichage obtenu, avec une colonne ayant une bordure pour mieux visualiser l’alignement :
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 .flex-column appliquée à l’élément <nav> permet d’aligner verticalement la barre de navigation : <nav class="nav flex-column">.
Voici l’affichage obtenu :
Les options de mise en forme
1. Utiliser des onglets
Bootstrap nous 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="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Adipiscing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Amet</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 barre de navigation flexible
Comme la classe .nav est basée sur Flexbox, nous pouvons créer des barres de navigation qui s’adaptent selon la taille de l’écran.
Voici le code utilisé pour cet exemple :
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="nav-link active" href="#">Lorem</a>
<a class="nav-link" href="#">Ipsum</a>
<a class="nav-link" href="#">Adipiscing</a>
<a class="nav-link" href="#">Amet</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 nous avons la classe .flex-sm-row qui indique que les éléments doivent s’afficher en ligne pour les petits écrans et plus. C’est donc cette règle qui s’applique sur les écrans de petite taille et les plus grands. Pour les écrans très petits, de taille inférieure à 576 pixels, c’est l’affichage vertical qui est utilisé.
Voici l’affichage sur un petit écran et supérieur :
Voici l’affichage obtenu sur un très...
Une barre de navigation avec bouton déroulant
Dans le chapitre précédent, nous avons vu les boutons déroulants, et bien vous pouvez parfaitement les intégrer dans une barre de navigation.
Voici le code de cet exemple :
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Lorem</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">Ipsum</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Ligula</a>
<a class="dropdown-item" href="#">Vulputate</a>
<a class="dropdown-item" href="#">Ullamcorper</a>
</div> ...