Créez des sites web responsive avec Bootstrap 4

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

<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="...">Info School</a>
</nav>

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 :

<nav class="navbar navbar-expand">
   <a class="navbar-brand" href="index.html">Info School</a>
   <ul class="navbar-nav">
      <li class="nav-item active">
         <a class="nav-link" href="index.html">Accueil</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Cours</a>
      </li>
   </ul>
</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é. 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 :

<nav class="navbar navbar-expand bg-dark">
   ...
</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 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 :

<nav class="navbar navbar-expand bg-dark navbar-dark">
   ...
</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 :

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 -->
<div class="bg-dark">
   <div class="container">
      <div class="row">
         <nav class="col navbar navbar-expand navbar-dark">
            ...contenu de la barre de navigation...
         </nav>
      </div>
   </div>
</div>

<!-- Reste de la page -->

<div class="container">
   ...contenu de la page...
</div>

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.

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 :

<nav class="col navbar navbar-expand-lg navbar-dark">
   ...contenu de la barre de navigation...
</nav>

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 :

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
   <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-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  :

<div id="navbarContent" class="collapse navbar-collapse">
   <ul class="navbar-nav">
      ...navigation...
   </ul>
</div>

Voici l'aspect futur du code HTML de votre barre de navigation responsive :

<nav class="col navbar navbar-expand navbar-dark">
   <a class="navbar-brand" href="index.html">Info School</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
   </button>
   <div id="navbarContent" class="collapse navbar-collapse">
      <ul class="navbar-nav">
         <li class="nav-item active">
            <a class="nav-link" href="index.html">Accueil</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Cours</a>
         </li>
      </ul>
   </div>
</nav>

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

<div class="jumbotron">
   <h1>Bienvenue sur Info School !</h1>
</div>

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.

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 :

<div class="card">
   <div class="card-body">
      Contenu de .card-body
   </div>
</div>

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 :

<div class="card">
   <div class="card-body">
      <h5 class="card-title">Titre de la carte</h5>
      <p class="card-text">Contenu textuel de la carte</p>
   </div>
</div>

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.

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