• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Ajoutez des composants interactifs

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Bravo ! Le site commence à prendre forme avec une page d'accueil, une page de cours, ainsi que des images et des vidéos. Maintenant, il est temps d'ajouter des composants interactifs pour rendre l'expérience utilisateur plus stimulante.

Utilisez les boutons pour inciter votre utilisateur à agir

Les boutons constituent l'une des formes les plus courantes d'interaction sur les sites web. Ils indiquent à vos utilisateurs qu'une action est possible sur la page, comme l’envoi d’un formulaire, l’ajout au panier d’un objet, etc.

Pour afficher un bouton dans Bootstrap, utilisez un élément   <button>  ou   <a>  avec une  classe .btn, ainsi qu'une deuxième classe pour définir la couleur d'arrière-plan.

Les classes relatives aux couleurs disponibles sont affichées ci-dessous :

Exemples de classes de couleurs btn-*
Exemples de classes de couleurs btn-*

Vous pouvez afficher un bouton utilisant l’élément  <button>  ou  <a> avec la couleur d'arrière-plan primaire (bleu par défaut), avec le code HTML suivant :

<button type="button" class="btn btn-primary">Bouton</button>
<a class="btn btn-primary" href="#" role="button">Lien</a>

À présent, ajoutez les boutons aux différentes cartes de leçons disponibles avec l’intitulé “Démarrer l'apprentissage” sur la page Cours (lessons.html) créée dans le chapitre précédent. 

<div class="card">
<img class=”card-img-top” src=”...” alt=”...”>
<div class="card-body">
[contenu de la carte]
</div>
</div>

Ces cartes permettront aux utilisateurs de commencer l’apprentissage d’un cours d’informatique sur votre site web en ouvrant une nouvelle page. De ce fait, je vous invite à utiliser l’élément <a> pour relier la carte à la page du cours en question, en modifiant l’attribut href.

Reliez la première carte à la page Détails du cours (lesson-1.html) pour valider notre exemple, et laissez la destination vide pour les autres.

Une fois que vous avez terminé, vous pouvez vérifier votre travail dans l'exemple du dossier partie-4/chapitre-1/boutons dans le dépôt Git du cours, si nécessaire.

Pour en savoir plus sur vos options avec les boutons, consultez la documentation de Bootstrap.

Fournissez plus d'informations grâce aux carrousels

L'ajout d'un carrousel, qui est un diaporama pouvant comprendre une image et du texte, est une méthode efficace pour mettre en avant certaines informations de votre site web. 

L'étape suivante de l'implémentation du site de l'école d’informatique (Info School) consiste à mettre à niveau la section hero de la page d'accueil, pour afficher un carrousel au lieu d'un jumbotron. J'ai fourni les images pour le carrousel.

Vous pouvez configurer le carrousel Bootstrap de base à l'aide de la structure HTML suivante :

<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>

Si vous ajoutez le code ci-dessus à votre page d'accueil, avec les attributs  src  appropriés pour les éléments <img> (en d’autres termes, la source des images utilisées), vous obtenez un carrousel simple avec des images qui pivotent automatiquement.

Examinons de plus près la structure du carrousel :

  • L'un des éléments du carrousel doit comprendre la classe  .active. Il s'agit généralement du premier élément. Sinon, le carrousel ne s'affiche pas..

  • La classe  .d-block fournit à l'élément une valeur d'affichage de bloc utilisant l’intégralité de l’espace disponible. Il existe d'autres classes d-* dans Bootstrap pour d'autres valeurs d'affichage. Vous trouverez toutes les options disponibles dans la documentation de la propriété d'affichage de Bootstrap.

  • La classe  .w-100 est une classe de dimensionnement qui contrôle la largeur (“w” pour “width” qui signifie largeur, en anglais) d'un élément. Les classes disponibles sont w-100,  w-75,  w-50,  w-25  et  w-auto, qui fournissent à un élément des valeurs de largeur relatives à son élément parent de 100 %, 75 %, 50 %, 25 %.

  • Afin d'éviter l'alignement de l'image par défaut du navigateur dans le carrousel, ajoutez les classes  .d-block et  .w-100  aux éléments   <img>.

À présent, donnons à nos utilisateurs un peu plus de contrôle, en ajoutant les boutons de navigation précédent et suivant

Voici la structure HTML une fois les boutons de navigation ajoutés :

<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
[... éléments carrousel ...]
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Précédent</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Suivant</span>
</a>
</div>

Comme vous le voyez, les boutons de navigation du carrousel sont ajoutés après le contenu de celui-ci sous la forme de deux liens : l'un pour revenir à la diapositive précédente et l'autre pour accéder à la diapositive suivante

La clé pour faire fonctionner tout l'ensemble, hormis la structure HTML correcte, est de fournir à chacun des liens précédent et suivant un attribut href qui correspond à l'attribut id du  <div>  parent du carrousel. Dans cet exemple, nous avons utilisé l’attribut id  #carouselControls.

Ajoutez les boutons de navigation au carrousel de votre page d'accueil et testez-le. Si nécessaire, vous pouvez consulter le dossier partie-4/chapitre-1/carrousel du dépôt Git du cours. 

Avertissez votre utilisateur avec des alertes

Les alertes sont utiles pour fournir aux utilisateurs des commentaires contextuels sur leurs actions ou leur fournir des notifications.

Une alerte simple peut être implémentée dans Bootstrap en ajoutant la classe  .alert  à un élément   <div>  et en y ajoutant un attribut  role=”alert”.

Pour contrôler la couleur d'arrière-plan de l'alerte, vous devez également ajouter une classe  .alert-*  au  <div>, où  *  est l'une des valeurs suivantes : primary, secondary, success, danger, warning, info, light ou dark.

Les couleurs par défaut de chacune de ces valeurs sont les mêmes que celles pour les classes   .bg-*  et   .button-* que vous avez observées au début de ce cours. Pour créer une alerte  “success” simple (la couleur par défaut est le vert), ajoutez le code HTML suivant à votre page :

<div class="alert alert-success" role="alert">
Félicitations ! Vous avez réussi !
</div>

L'alerte obtenue doit ressembler à cela :

Exemple de composant d'alerte de Bootstrap
Exemple de composant d'alerte de Bootstrap

Testez par vous-même en ajoutant une alerte en haut de la page Détails du cours (lesson-1.html), en utilisant la classe informative .alert-info .

Bien qu'une alerte simple soit facile à implémenter, elle ne constitue généralement pas la meilleure expérience utilisateur. Il est important de fournir aux utilisateurs la possibilité de masquer cette alerte.

Pour ce faire, vous devez dans un premier temps ajouter les classes  .alert-dismissible,.fade   et  .show   à l’élément  <div>  de l’alerte. Ensuite, intégrez l’élément  <button>  avec la classe  .close  et les attributs suivants à l’intérieur de l’alerte, afin de permettre sa fermeture :

<div class="alert alert-success alert-dismissible fade show" role="alert">
<h5 class="alert-heading">Prérequis</h5>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

Votre prochaine tâche consiste à ajouter une alerte qu'il est possible de supprimer, et à valeur informative, en haut de la page Détails du cours que vous avez créée, avec les éléments suivants :

  • utilisez une balise titre  <h5>  avec la classe CSS  .alert-heading  pour y intégrer le titre “Prérequis” ;

  • utilisez une balise paragraphe  <p>  avec le message suivant : “Bases en CSS. Si vous ne les maîtrisez pas, suivez ce cours : Apprenez à créer votre site web avec HTML5 et CSS3” ;

  • intégrez une balise de lien  <a>  avec la classe CSS  .alert-link  en englobant le texte “Apprenez à créer votre site web avec HTML5 et CSS3”.

Vérifiez votre travail si nécessaire, via le dossier partie-4/chapitre-1/alert dans le dépôt Git du cours. 

En résumé

  • Pour ajouter un bouton avec Bootstrap, vous pouvez utiliser un élément  <button>  ou   <a>  avec une  classe .btn . Vous pouvez également ajouter une deuxième classe pour définir la couleur d'arrière-plan du bouton.

  • Vous pouvez ajouter des alertes avec la classe  .alert.

  • Bootstrap offre la possibilité d'ajouter des carrousels à vos pages. 

Maintenant que vous avez appris à ajouter de l'interactivité via des carrousels, des alertes et des boutons, vous êtes prêt à apprendre à utiliser Bootstrap pour récupérer l’avis des utilisateurs à l'aide de formulaires.

Exemple de certificat de réussite
Exemple de certificat de réussite