|
La création de barres de progression avec Bootstrap 5 implique l'utilisation de leurs utilitaires intégrés. Voici un guide étape par étape :
Étape 1 :Importer Bootstrap
Incluez la bibliothèque Bootstrap, soit via un lien CDN, soit en la téléchargeant localement.
Étape 2 :Créer une barre de progression
Dans l'élément `div` où vous souhaitez créer la barre de progression, utilisez la classe `.progress`.
```html
```
Étape 3 :Ajouter l'état de la barre de progression
Pour remplir la barre de progression, ajoutez la classe `.progress-bar` à l'intérieur du conteneur `.progress`. Vous pouvez également inclure des modificateurs pour spécifier le pourcentage de progression et le style d'affichage.
```html
```
Ici, la classe `.progress-bar` crée la barre elle-même, et nous avons ajouté la classe `.progress-bar-striped` pour lui donner un effet rayé. Ajustez `aria-valuenow` pour spécifier la valeur de progression actuelle.
Étape 4 :Spécifiez le pourcentage et l'étiquette
Vous pouvez facilement ajouter le pourcentage de progression actuel ou une étiquette à la barre en enveloppant le texte souhaité dans un élément `` à l'intérieur du conteneur `.progress-bar`.
```html
```
Étape 5 : Animer la barre de progression
Pour activer l'animation dans la barre de progression, utilisez la classe `.progress-bar-animated` sur l'élément de la barre de progression.
```html
```
Étape 6 :Afficher les barres de progression contextuelles
Vous pouvez utiliser les classes Bootstrap intégrées pour modifier davantage l'apparence de la barre de progression en attribuant les classes `bg-...` et `text-...` dans `.progress-bar`.
```html
```
Étape 7 :Hauteur et coins arrondis
Pour modifier la hauteur de la barre de progression ou ajouter des coins arrondis, utilisez la classe utilitaire `.h-*` pour la hauteur et la classe `.rounded` pour les coins arrondis.
```html
```
Étape 8 :Contrôler l'affichage
Vous pouvez contrôler l'aspect d'affichage de la barre de progression à l'aide de la classe `.visually-hidden` ou `.d-none` des utilitaires de Bootstrap.
Conclusion :
Avec ces étapes, vous pouvez facilement créer diverses barres de progression Bootstrap 5 pour indiquer la progression, les états ou d'autres données pertinentes sur vos pages Web. La personnalisation et le style des barres de progression sont possibles à l'aide de classes et de propriétés CSS supplémentaires.
|
