Bootstrap : la navigation

Une navigation est un élément important d’un site. Bootstrap fournit une série de classes très structurées pour coder la navigation d’un site, qui permet de disposer facilement de sa version pour smartphone.

Structure générale de la navigation

Par défaut dans Bootstrap, la navigation se dispose dans un élément nav. Ici elle est placée dans un container, mais c’est optionnel.

Voici un codage de base, fourni par la documentation Bootstrap :

<header class="container">
   <!-- navbar -->  
   <nav class="navbar navbar-expand-md">  
       <a class="navbar-brand" href="#">Home</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">  
           <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav">
               <li class="nav-item">
                   <a class="nav-link" 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>  
           </ul>
       </div>
   </nav>
</header>

Ce qui devrait donner ceci

si on lui ajoute ce code css

.nav-link{ margin-right: 1em !important;}
.nav-link:hover{ background: #f4f4f4; color: #f97300; }
.navbar-collapse{ justify-content: flex-end;}
.navbar-toggler-icon {
   height: 20px; width: 20px;
   background-image: linear-gradient(
       0deg,
       white, white 20%,
       transparent 20%, transparent 40%,
       white 40%, white 60%,
       transparent 60%, transparent 80%,
       white 80%, white 100%
   );
}
.navbar-toggler:hover .navbar-toggler-icon {
   background-image: linear-gradient(
       0deg,
       #000, #000 20%,
       transparent 20%, transparent 40%,
       #000 40%, #000 60%,
       transparent 60%, transparent 80%,
       #000 80%, #000 100%
   );
}

Décrivons tag par tag

Le tag nav est associé à deux classes :
.navbar le désigne comme navigation, et
.navbar-expand-md désigne le taille à laquelle la navigation va être remplacée par l’icône permettant de déployer la navigation sur les petits écrans, md signifiant "en dessous de 768 pixels" (voir les différentes tailles dans la doc).

.navbar-brand est fait pour recevoir le nom du site. On remarquera l’orientation commerciale de Bootstrap dans ce terme.

.navbar-toggler est associé à tag button qui contient l’icône de la navigation "responsive" et qui sera cachée sur les grands écrans. Le tag contient tout une série d’attributs nécessaires à son fonctionnement, qu’on recopiera comme des ânes.
.navbar-toggler-icon est l’icône elle même.

.collapse et .navbar-collapse sont associés à un div qui contient une liste (ul et li). Remarquez qu’un id, #navbarSupportedContent, est aussi associé, qui est nécessaire au javascript qui plie et déplie la navigation. Il correspond à l’attribut du bouton data-target="#navbarSupportedContent"

.navbar-nav est associé à l’élément ul
.nav-item est associé à chaque élément li
.nav-link est associé aux liens eux-mêmes

Modifier la disposition spatiale de la navigation

Si on veut changer ce comportement, on utilisera les différentes classes fournies par le code, mais on dispose de quelques classes supplémentaires permettant de facilement atteindre certains comportements typiques.

Placer la navigation en position fixe en haut de page peut se faire en ajoutant la classe .fixed-top à l’élément nav.

La placer en bas avec .fixed-bottom ajouté à l’élément nav.

Couleurs de navigation

Par défaut, la navigation est de couleur bleue sur fond transparent, ce qui correspond à la couleur "light". Pour changer ce comportement, on peut utiliser les classes .navbar-light pour passer en couleur "secondary" et .bg-light pour associer la couleur de fond "light".

On peut aussi passer à une couleur sombre avec .navbar-dark et .bg-dark.
et ainsi de suite pour les couleur de base.
Voir la documentation sur les couleurs.