Maintenant que vous avez appris à créer la structure de vos mises en page à l'aide de la grille de Bootstrap 4, 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
.
class="navbar"
...
Les barres de navigation nécessitent également une classe .navbar-expand
pour la réduction responsive du menu sur smartphone 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 point d’arrêt de la barre de navigation à l’aide d’un modificateur de classe { -sm
, -md
, -lg
, -xl
} 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.
class="navbar navbar-expand"
...
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 :
class="navbar navbar-expand"
class="navbar-brand" href="..."Info School
Ensuite, ajoutez les 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 :
class="navbar navbar-expand"
class="navbar-brand" href="index.html"Info School
class="navbar-nav"
class="nav-item active"
class="nav-link" href="index.html"Accueil
class="nav-item"
class="nav-link" href="#"Cours
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é. Créez le code HTML de votre barre de navigation afin de vous assurer qu’un seul élément utilise cette classe.
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 foncé. Nous utiliserons donc la classe utilitaire .bg-dark
pour modifier sa couleur :
class="navbar navbar-expand bg-dark"
...
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 claire, il vous suffit d’ajouter la classe .navbar-light
. À l’inverse, comme dans le cas de notre site, ajoutez la classe .navbar-dark
à une barre de navigation de couleur foncée.
Voici comment faire :
class="navbar navbar-expand bg-dark navbar-dark"
...
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 :

Les choses commencent à prendre forme ! Bravo !
Développer la section d'en-tête à la largeur complète de la fenêtre constitue un ajustement supplémentaire que vous pouvez apporter à la mise en page de votre barre de navigation. Si vous vous rappelez du dernier chapitre, un <div>
ayant la classe .container
ajoute du remplissage à son contenu. Actuellement, l’intégralité du contenu de notre site est enveloppé dans ce <div>
.
Si vous souhaitez que l'élément <nav>
de la section d'en-tête conserve la même largeur et le même remplissage que le contenu du reste de la page, et que l'arrière-plan soit développé à la largeur complète, comme sur l'image suivante, nous devons apporter quelques modifications.
Pour ce faire, utilisez deux <div>
.container
distincts : l'un pour envelopper l'élément <nav>
, et l'autre pour envoyer le contenu du reste de la page en dehors de la section d'en-tête.
Voilà à quoi cela ressemble :
<!-- Header -->
class="bg-dark"
class="container"
class="row"
class="col navbar navbar-expand navbar-dark"
...contenu de la barre de navigation...
<!-- Reste de la page -->
class="container"
...contenu de la page...
Comme vous le voyez, combiner les classes .container
, .row
et .col
dans différentes configurations vous permet de savoir comment afficher la mise en page de la grille dans Bootstrap. Notez la manière dont la classe .col
a été ajoutée à l'élément <nav>
pour garantir qu'elle occupe l’intégralité de la largeur de son <div>
parent classe .row
.
Désormais, apportez les modifications à votre page d'accueil. Vous pouvez vérifier votre travail dans le fichier index.html du dossier partie-3/chapitre-1/navigation dans le dépôt GitHub de l'exemple de site, si elle ne s'affiche pas comme prévu.
Créez une navigation responsive
Maintenant que vous avez une configuration de barre de navigation basique, il est temps de vérifier qu'elle est 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.
La vidéo suivante montre le comportement réactif prévu de la barre de navigation.
Résumé du comportement de la navigation responsive pour notre exemple de site dans la vidéo :
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}), 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-lg
:
class="col navbar navbar-expand-lg navbar-dark"
...contenu de la barre de navigation...
Ensuite, vous devez ajouter le bouton Bascule 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 :
class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
class="navbar-toggler-icon"
Comme vous pouvez le constater, le bouton comprend une classe .navbar-toggler
, ainsi que des attributs data tels que data-toggle="collapse"
et data-target="#navbarContent"
. Ces attributs permettent de cibler le bon élément <div>
utilisant la classe .collapse
et l’identifiant #navbarContent
, sans écrire une seule ligne JavaScript.
Pour ce faire, ajoutez les classes .collapse
et .navbar-collapse
au <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-target
du bouton Bascule, dans ce cas navbarContent
:
id="navbarContent" class="collapse navbar-collapse"
class="navbar-nav"
...navigation...
Voici l'aspect futur du code HTML de votre barre de navigation responsive :
class="col navbar navbar-expand navbar-dark"
class="navbar-brand" href="index.html"Info School
class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
class="navbar-toggler-icon"
id="navbarContent" class="collapse navbar-collapse"
class="navbar-nav"
class="nav-item active"
class="nav-link" href="index.html"Accueil
class="nav-item"
class="nav-link" href="#"Cours
Ajoutez-la au site et testez-la pour voir si elle fonctionne comme prévu. Si vous êtes bloqué, vous pouvez consulter le fichier index.html dans le dossier partie-3/chapitre-1/responsive-navigation du dépôt GitHub.
Jumbotron
Maintenant que la navigation du site est configurée, il est temps de s'occuper du contenu. Pour la page d’accueil, nous utiliserons le composant jumbotron de Bootstrap, qui intègre de base une mise en page aérée et flexible prévue pour mettre en valeur du contenu.
Pour créer un jumbotron, ajoutez simplement la classe .jumbotron
à un <div>
:
class="jumbotron"
Bienvenue sur Info School !
Voilà à quoi cela ressemble :

La page d'accueil commence à prendre forme maintenant ! Ajoutez un jumbotron et testez son comportement réactif. Comme d'habitude, si vous êtes bloqué, vérifiez votre travail dans le dépôt ; dans ce cas, ce sera dans le dossier partie-3/chapitre-1/jumbotron.
Créez des cartes
Vous remarquez, dans les conceptions de la partie 2, que la page d'accueil comporte des cartes d'information vantant les avantages de l'école d’informatique Info School. Bootstrap propose un composant nommé à juste titre carte, pour afficher le contenu de cette manière :

Le composant carte est un conteneur flexible qui comprend des options pour un en-tête, un pied de page et un contenu. Attribuer une classe .card
à un <div>
et ajouter un <div>
enfant utilisant la classe .card-body
sont la configuration basique d'un composant carte :
class="card"
class="card-body"
Contenu de .card-body
Le <div>
.card-body
peut contenir de nombreux types d'éléments cartes. Mais pour l'instant, utilisez ceux-ci :
.card-title
est ajouté à une balise<h*>
pour façonner le titre de la carte ;.card-text
est ajouté à une balise<p>
pour façonner le texte, tel que les introductions et les descriptions.
Cet extrait montre la structure d'une carte de base :
class="card"
class="card-body"
class="card-title"Titre de la carte
class="card-text"Contenu textuel de la carte
Plus tard dans le cours, vous ajouterez d'autres éléments aux cartes.
Pour l'instant, ajoutez une carte à la place de chaque espace réservé sur la page d'accueil. Pour chacune d’entres elles, ajoutez un titre et du texte. Vous pouvez utiliser la conception de la page d'accueil ci-dessous comme indication pour le contenu.

Après avoir ajouté les cartes, vérifiez leur comportement responsive pour vous assurer que tout fonctionne comme prévu.
Les cartes permettent également de répertorier les différentes leçons sur la page des cours. Examinez la conception que vous avez observée dans la partie 2 et commencez à créer cette page dans un fichier nommé lessons.html.
Lorsque vous ajoutez la page des cours, pensez à ajouter le lien au nouveau fichier de la barre de navigation.
En cas de besoin, vous pouvez vérifier votre travail dans le dossier partie-3/chapitre-1/cards du dépôt Git du cours.
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é.
Il est possible de créer un espace d’accueil à l'aide d'un jumbotron pour mettre en valeur les informations clés de votre site web.
Le composant carte permet d'afficher du contenu.
La page d'accueil commence à prendre forme avec les nouveaux composants de l'interface utilisateur que vous avez appris à implémenter. Maintenant, vous êtes prêt à ajouter plus de détails en découvrant les classes de formatage du texte de Bootstrap.