Créez des sites web responsives avec Bootstrap 5

Appréhendez le composant progress bar

Dans ce nouveau chapitre, vous allez découvrir un nouveau composant Bootstrap 5 : les barres de progression (progress bar, en anglais).

Comme à chaque fois que vous allez avoir envie d’intégrer un composant Bootstrap 5 dans votre site, rendez-vous d’abord dans la documentation Bootstrap du composant en question. Pour ce chapitre, vous allez chercher le composant “Progress” dans le menu latéral “Components”.

Sur la documentation Bootstrap, on peut voir qu’il existe plusieurs variantes des barres de progression, libre à vous de les tester de votre côté, mais dans le cas de votre portfolio, vous allez utiliser la première option :

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Vous voyez que la structure est construite comme ceci :

• une div  avec la classe  progress (la barre grise) ; 

• une div  enfant avec la classe  progress-bar  (la barre bleue), une  width  pour donner la valeur de la progression.

Maintenant que vous avez vu comment se construit la barre de progression de Bootstrap 5, vous pouvez les combiner avec des classes utilitaires pour les personnaliser un peu plus (par exemple, ajouter un  box-shadow, arrondir complètement les angles...). 

À vous de jouer !

Votre mission est de créer au moins 3 barres de progression dans chaque partie (design et développement), et elles devront ressembler à ça :

Pour vous aider dans votre réflexion :

• Pensez au système de grille de Bootstrap 5.

• Pensez aux classes utilitaires pour les paddings, les couleurs et les alignements (flexbox) de Bootstrap 5.

• Ajoutez la balise “link” de Font Awesome à votre projet pour avoir accès aux icônes des différents langages web (HTML, CSS, Sass, JS, etc.) :<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !

Et maintenant, il nous suffit de dupliquer cette progressbar le nombre de fois que l’on a de compétences à montrer, puis d’ajuster le contenu à ces dernières (changement de l'icône, du titre et de la valeur de la barre de progression).

En résumé

• Avant d’implémenter un nouveau composant dans votre design, faites toujours un tour sur la documentation Bootstrap 5 pour regarder comment il fonctionne.

• Le composant “progress bar” de Bootstrap 5 est un élément visuel que vous pouvez ajouter à votre site.

• Il est possible de placer des grilles dans des grilles pour nous aider à structurer la mise en page de nos éléments.

• Pour pousser la puissance de Bootstrap à son maximum, il ne faut pas hésiter à combiner les composants et les classes utilitaires.

Maintenant que vous avez intégré un composant composé uniquement de CSS, nous allons voir comment ajouter un composant qui nécessite un peu de JS (JavaScript) pour le personnaliser, la “card”.