Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Bootstrap 5 pour l'intégrateur web
  3. La navigation
Extrait - Bootstrap 5 pour l'intégrateur web Concevez des sites au design moderne
Extraits du livre
Bootstrap 5 pour l'intégrateur web Concevez des sites au design moderne
1 avis
Revenir à la page d'achat du livre

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 :

images/C10-001.png

É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 :

images/C10-002.png

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 :

images/C10-003.png

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 :

images/C10-004.png

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 :

images/C10-005.png

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 :

images/C10-008.png

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> ...