Bootstrap - Barres de progression : Un guide complet pour les débutants

Salut à toi, futur développeur web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des barres de progression de Bootstrap. En tant que ton enseignant bienveillant en informatique, je suis là pour te guider à travers cette fascinante aventure. Alors, prends une tasse de café (ou de thé, si c'est ton truc), et c'est parti !

Qu'est-ce que les barres de progression ?

Avant de sauter dans le code, parlons des barres de progression et de leur importance. Imagine que tu télécharges un fichier volumineux et que tu ne sais pas combien de temps cela va prendre. Frustrant, n'est-ce pas ? C'est là que les barres de progression interviennent ! Ce sont des indicateurs visuels qui montrent à quel point un processus est avancé, offrant aux utilisateurs une idée du temps qu'il leur reste à attendre.

Dans le monde du design web, les barres de progression sont extrêmement utiles pour :

• Afficher l'état de chargement
• Indiquer l'achèvement de formulaires en plusieurs étapes
• Montrer les niveaux de compétence ou les évaluations
• Et bien plus encore !

Maintenant, mettons les mains dans le cambouis et commençons à coder !

Barre de progression de base

Commençons par la forme la plus simple d'une barre de progression dans Bootstrap. Voici à quoi elle ressemble :

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

Que se passe-t-il ici ? Décomposons :

1. Nous avons un <div> extérieur avec la classe progress. Cela crée le conteneur pour notre barre de progression.
2. À l'intérieur, nous avons un autre <div> avec la classe progress-bar. C'est la barre elle-même qui se remplira.
3. Nous avons défini la width à 25% en utilisant le CSS en ligne. Cela détermine à quel point la barre semble pleine.
4. Les attributs aria-* sont pour l'accessibilité, aidant les lecteurs d'écran à comprendre l'état de la barre.

Taille des barres

Maintenant, parlons de la taille de nos barres de progression. Bootstrap nous offre deux principales méthodes pour contrôler la taille : la largeur et la hauteur.

Largeur

La largeur de la barre de progression représente l'avancement du processus. Nous pouvons la définir en pourcentages :

<div class="progress">
<div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>

Ce code créera cinq barres de progression, chacune remplie à un niveau différent. C'est comme remplir cinq verres d'eau à des niveaux différents !

Hauteur

Par défaut, les barres de progression de Bootstrap sont assez fines. Mais que faire si nous voulons une barre plus épaisse ? Nous pouvons ajuster la hauteur :

<div class="progress" style="height: 1px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>

Ici, nous créons deux barres de progression : une super fine (1px) et une extra épaisse (20px). C'est comme comparer une paille à un morceau de gâteau épais !

Étiquettes

Parfois, il est utile d'ajouter du texte à l'intérieur de nos barres de progression. Voici comment nous faisons :

<div class="progress">
<div class="progress-bar" style="width: 25%;">25%</div>
</div>

Simple, non ? Il suffit d'ajouter le texte à l'intérieur du div progress-bar. C'est comme écrire directement sur la barre !

Arrière-plan

Tu veux rendre tes barres de progression plus colorées ? Bootstrap a tout prévu avec des classes de couleur prédéfinies :

<div class="progress">
<div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

Ces classes (bg-success, bg-info, bg-warning, bg-danger) nous donnent respectivement des barres vertes, bleues, jaunes et rouges. C'est comme avoir un petit arc-en-ciel de progression !

Barres multiples

Parfois, une barre ne suffit pas. Peut-être que tu veux montrer la progression dans différentes catégories toutes en une barre. Bootstrap nous permet de superposer plusieurs barres :

<div class="progress">
<div class="progress-bar" style="width: 15%">15%</div>
<div class="progress-bar bg-success" style="width: 30%">30%</div>
<div class="progress-bar bg-info" style="width: 20%">20%</div>
</div>

Cela crée une seule barre de progression avec trois segments, chacun de couleur et de largeur différents. C'est comme un sandwich coloré de progression !

Barre de progression à rayures

Tu veux ajouter un peu de peps à tes barres de progression ? Essaye d'ajouter des rayures :

<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 40%"></div>
</div>

La classe progress-bar-striped ajoute des rayures diagonales à notre barre. C'est comme si ta barre de progression portait un costard à rayures !

Rayures animées

Mais pourquoi s'arrêter aux rayures statiques quand nous pouvons les faire bouger ? Regarde ceci :

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

Ajouter la classe progress-bar-animated fait bouger les rayures de droite à gauche. C'est comme si ta barre de progression dansait un peu !

Tout réunir

Maintenant que nous avons découvert toutes ces fonctionnalités sympas, mettons-les toutes ensemble dans une super barre de progression :

<div class="progress" style="height: 30px;">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 40%">40% Complété</div>
</div>

Cela crée une barre de progression haute, verte, rayée, animée et remplie à 40% avec une étiquette. C'est la multifonction de la barre de progression !

Conclusion

Et voilà, les amis ! Tu es maintenant un pro des barres de progression Bootstrap. Souviens-toi, ces barres ne sont pas seulement des visuels jolis - elles sont un moyen de communiquer avec tes utilisateurs, les informant et les engageant.

Alors que tu continues ton voyage de codage, n'oublie pas d'expérimenter et de t'amuser. Peut-être que tu créeras une barre de progression qui se remplit lorsque tu fais défiler la page, ou une qui montre à quel point tu es proche de battre ton record personnel dans un jeu. Les possibilités sont infinies !

Continue de coder, continue d'apprendre, et surtout, continue de progresser. Jusqu'à la prochaine fois, c'est ton enseignant bienveillant en informatique qui signe off !

Credits: Image by storyset