Créez des sites web responsives avec Bootstrap 5

10 hours
Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Last updated on 5/23/23

Créez de la navigation responsive

Maintenant que vous avez appris à créer la structure de vos mises en page à l'aide de la grille de Bootstrap 5, il est temps d'ajouter des composants à cette structure !

La navigation est un des points majeurs de tout site web. C’est un excellent point de départ pour utiliser des composants Bootstrap.

Ajoutez de la navigation à votre site

Le framework comprend un composant de barre de navigation puissant et réactif. Il est implémenté à l'aide d'un élément nav possédant la classe .navbar.

<nav class="navbar">
  ...
</nav>

Les barres de navigation nécessitent également une classe .navbar-expand pour la réduction responsive du menu sur Smartphones et petits écrans. La classe .navbar-expand affecte la largeur de la zone de visualisation pour laquelle la barre de navigation est développée ou réduite. Il est possible d’adapter le breakpoint de la barre de navigation à l’aide d’un modificateur de classe { -sm , -md , -lg , -xl, -xxl } venant s'ajouter à la classe .navbar-expand comme suit : .navbar-expand-md.

Pour l'instant, ajoutez la classe navbar-expand sans modificateur de classe relatif à la taille. Nous examinerons ultérieurement la création d'une barre de navigation réduite pour des écrans plus petits.

<nav class="navbar navbar-expand">
  ...
</nav>

Pour la plupart des sites web, la marque est affichée le long de la barre de navigation principale. Bootstrap propose une classe .navbar-brand prévue à cet effet dans le composant de la barre de navigation. Ajoutez le nom du site dans l'élément prévu à cet effet, comme ci-dessous :

<nav class="navbar navbar-expand">
    <a class="navbar-brand" href="...">Prénom Nom</a>
</nav>

La mise en page de base de la marque n’est pas très originale. C’est pourquoi nous allons utiliser les classes utilitaires de Bootstrap 5 pour la rendre un peu plus stylée !

Dans notre cas, nous allons ajouter les classes .text-uppercase .fw-bold (texte en majuscules + texte en gras) à notre a.navbar-brand. Ensuite, nous allons entourer notre prénom d’une balise span afin de lui donner d'autres propriétés de mise en page. Pour ce faire, nous ajoutons ces classes à notre élément span, .bg-primary .bg-gradient .p-1 .rounded-3 .text-light :

<a class="navbar-brand text-uppercase fw-bold" href="/index.html">
    <span class="bg-primary bg-gradient p-1 rounded-3 text-light">John</span> Doe
</a>

Dans le navbar, le texte John est blanc et situé dans un rectangle bleu. Le texte Doe reste normal, noir sur le navbar blanc. — Le logo du navbar

Et voilà, nous avons ajouté un peu de personnalisation à notre logo sans taper une seule ligne de CSS !

Passons maintenant aux liens de navigation. Les éléments de navigation doivent être placés dans une liste non ordonnée contenant les éléments <ul>, <li> et <a>, selon les classes indiquées dans cet extrait :

<nav class="navbar navbar-expand">
    <div class="container">
        <a class="navbar-brand text-uppercase fw-bold" href="/index.html">
            <span class="bg-primary bg-gradient p-1 rounded-3 text-light">John</span> Doe
        </a>
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#johndoe">Qui suis-je ?</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#expertise">Expertises</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
            </li>
        </ul>
  </div>
</nav>

Vous remarquerez que le premier élément <li> dans l'extrait de code comprend une classe .active. Cela permet d'indiquer l'un des éléments de navigation comme l'élément “actif”, actuellement sélectionné. Vous pouvez créer le code HTML de votre barre de navigation afin de vous assurer qu’un seul élément utilise cette classe.

Il y a un autre élément que vous devez bien connaître maintenant, il s’agit du div.container. L’effet est exactement le même que partout ailleurs dans la page, il sert à contenir les éléments de la navbar.

Désormais, votre barre de navigation est personnalisée avec le nom du site et les liens de navigation. Ensuite, ajoutons de la couleur !

Pour modifier les couleurs de l'arrière-plan et le texte dans la barre de navigation, vous pouvez ajouter des styles CSS créés de toutes pièces. Cependant, vous avez également la possibilité d’appliquer les classes utilitaires de couleurs d'arrière-plan de Bootstrap à vos différents éléments. Celles-ci sont particulièrement utiles lors du prototypage, car elles vous permettent d'ajuster la couleur d'arrière-plan d'un élément (pas uniquement les barres de navigation !) à l'aide des préréglages de Bootstrap.

Comme vous l'avez vu dans le chapitre précédent, l'arrière-plan de la barre de navigation est gris clair. Vous utiliserez donc la classe utilitaire .bg-light pour modifier sa couleur :

<nav class="navbar navbar-expand bg-light">
  ...
</nav>

Les classes .navbar-light et .navbar-dark constituent un autre ensemble pratique dans la gestion des couleurs Bootstrap. Ces classes ajustent la couleur des éléments de la barre de navigation, comme la marque et les liens de navigation, pour offrir un contraste à l'arrière-plan choisi. Lorsque vous utilisez une barre de navigation de couleur foncée, il vous suffit d’ajouter la classe .navbar-dark. À l’inverse, comme dans le cas de notre site, ajoutez la classe .navbar-light à une barre de navigation de couleur claire.

Voici comment faire :

<nav class="navbar navbar-expand bg-light navbar-light">
  ...
</nav>

Maintenant, avec toutes les modifications apportées à la section d'en-tête et à la barre de navigation, votre prototype de page d'accueil doit ressembler à ceci :

La barre de navigation telle qu’elle doit être au chapitre 2 de la partie 3

Les choses commencent à prendre forme ! Bravo !

Créez une navigation responsive

Maintenant que vous avez une configuration de barre de navigation basique, il est temps de vérifier qu'elle soit responsive. Étant donné que Bootstrap est un framework mobile-first et que les classes de la barre de navigation dans le code utilisées jusqu'à présent ne comprennent pas de modificateurs de classes relatifs à la taille, l'aspect de la barre de navigation sera identique pour toutes les tailles d'écran.

Lorsque vous ajoutez du contenu à la barre de navigation, tel que des logos et des liens supplémentaires, elle finit par être trop grande pour des écrans plus petits. Pour la rendre responsive à des tailles d'écran différentes, modifiez-la de sorte qu'elle soit réduite pour des écrans plus petits et développée pour des écrans plus grands.

Pour le site portfolio, nous voudrons que la navigation soit comme dans l'image ci-dessous :

La navigation en mode mobile se développe ou se cache au clique d'utilisateur. — Pour la version mobile, la navigation se réduit

Selon le comportement de la navigation responsive pour notre exemple de site ci-dessus, nous pouvons en tirer quelques conclusions :

lorsque la largeur de la zone de visualisation est grande au minimum, le menu de navigation est développé et affiche l’intégralité du contenu ;
lorsque la largeur de la zone de visualisation est inférieure au point d'arrêt utilisé ( {-sm|-md|-lg|-xl|-xxl}), le menu de navigation est masqué et un bouton “bascule de navigation” s’affiche. Ce dernier permet de réduire ou développer le menu.

Cela fait beaucoup à apprendre ; mais heureusement, Bootstrap simplifie extrêmement bien les choses.

La première étape dans l'implémentation de la navigation responsive consiste à utiliser le modificateur de classe relatif à la taille dans la classe .navbar-expand de l'élément <nav>. N'oubliez pas que les modificateurs de classe dans Bootstrap fonctionnent vers le haut. Utiliser la classe .navbar-expand sans modificateur de classe appliquera la classe à toutes les tailles en partant de la taille extra small au minimum.

Pour rendre la navigation responsive de la manière spécifiée ci-dessus, vous devez appliquer le modificateur de classe qui développe le menu de la barre de navigation pour de grands écrans minimum. Vous devrez donc le remplacer par .navbar-expand-md.

<nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
  ...contenu de la barre de navigation...
</nav>

Ensuite, vous devez ajouter le bouton bascule (toggle) de navigation qui permettra d’afficher ou masquer le menu de navigation de votre site web. Pour une navigation responsive, intégrez le bouton juste après l’élément <a> classe .navbar-brand, avec les attributs et le contenu suivants :

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Comme vous pouvez le constater, le bouton comprend une classe .navbar-toggler, ainsi que des attributs data tels que data-bs-toggle="collapse" et data-bs-target="#navbarNav". Ces attributs permettent de cibler le bon élément <div> utilisant la classe .collapse et l’identifiant #navbarNav, sans écrire une seule ligne de JavaScript.

Pour ce faire, ajoutez les classes .collapse et .navbar-collapse à la <div> qui enveloppe la liste des liens de navigation.

Enfin, ajoutez l’attribut identifiant ayant la même valeur que celle de l'attribut data-bs-target du bouton Bascule, dans ce cas navbarNav :

<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#johndoe">Qui suis-je ?</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#expertise">Expertises</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#portfolio">Portfolio</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
        </li>
    </ul>
</div>

Vous remarquerez peut-être la classe justify-content-end : encore une fois, c’est une classe utilitaire de Bootstrap 5 permettant d’ajouter la propriété flex justify-content: flex-end.

En effet, la navigation Boostrap 5 est par défaut en display flex, ce qui fait que nous pouvons utiliser les propriétés flex sur les éléments enfants de la nav pour les placer à droite, à gauche, au centre...

À vous de jouer !

Votre mission pour ce chapitre : vous devez réaliser la navigation responsive de votre portfolio :

Votre menu doit devenir responsive en dessous des écrans moyens.
Votre menu doit rester fixé en haut de l’écran lors du défilement de la page.
Le bouton déclencheur du menu mobile devra être sur la droite.
Vous devez utiliser les classes utilitaires du flex pour pouvoir positionner vos éléments.

En résumé

La classe .navbar permet d'ajouter une barre de navigation à un site web.
Il est possible de modifier la couleur des barres de navigation grâce aux classes .navbar-light et .navbar-dark.
Il faut ajouter un modificateur de classe à .navbar-expand pour rendre la barre de navigation responsive.
Implémenter un composant navigation responsive vous permettra d’afficher ou masquer votre menu en fonction de la taille de l’écran utilisé.
Vous pouvez personnaliser la typographie de votre site grâce aux classes utilitaires de Boostrap 5.
Il est possible d’ajouter des icônes grâce à Bootstrap 5.

La page d'accueil commence à prendre forme avec les nouveaux composants de l'interface utilisateur que vous avez appris à implémenter. Maintenant, vous allez découvrir quelques-uns des composants de Bootstrap 5, et comment les implémenter dans votre portfolio..