Bootstrap Barres de progression
Ce chapitre expliquera les barres de progression Bootstrap. Dans ce tutoriel, vous verrez comment utiliser Bootstrap pour créer des barres de progression pour les états de chargement, de redirection ou d'action.
Les barres de progression Bootstrap utilisent les transitions et animations CSS3 pour obtenir cet effet. Internet Explorer 9 et les versions antérieures ainsi que les anciennes versions de Firefox ne prennent pas en charge cette fonctionnalité ; Opera 12 ne prend pas en charge l'animation.
Barre de progression par défaut
Suivez ces étapes pour créer une barre de progression de base :
- Ajoutez un <div> avec la classe.progressau <div>.
- Ensuite, à l'intérieur du <div> ci-dessus, ajoutez un <div> avec la classe.progress-barau <div> vide.
- Ajoutez un attribut style avec une largeur exprimée en pourcentage, par exemple style="60%" ; indique que la barre de progression est à la position 60%.
Regardons l'exemple suivant :.sr-onlyLa classe peut masquer le contenu textuel :
Exemple
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% terminé</span>
</div>
</div>
Essayez-le vous-même »
Le résultat est affiché ci-dessous :
Vous pouvez également définir le contenu textuel dans la barre de progression :
Exemple
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
Essayez-le vous-même »
Le résultat est affiché ci-dessous :
Barres de progression alternatives
Suivez ces étapes pour créer des barres de progression avec différents styles :
- Ajoutez un <div> avec la classe.progressau <div>.
- Ensuite, à l'intérieur du <div> ci-dessus, ajoutez un <div> avec la classe.progress-baret la classeprogress-bar-*au <div> vide. Où * peut êtresuccess、info、warning、danger。
- Ajoutez un attribut style avec une largeur exprimée en pourcentage, par exemple style="60%" ; indique que la barre de progression est à la position 60%.
Regardons l'exemple suivant :
Exemple
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% terminé (succès)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% terminé (info)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% terminé (avertissement)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% terminé (danger)</span>
</div>
</div>
Essayez-le vous-même »
Le résultat est affiché ci-dessous :
Afficher le contenu textuel de la barre de progression :
Exemple
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Terminé (succès)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Terminé (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Terminé (avertissement)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Terminé (danger)
</div>
</div>
Essayez-le vous-même »
Le résultat est affiché ci-dessous :
Barres de progression rayées
Suivez ces étapes pour créer une barre de progression rayée :
- Ajoutez un <div> avec la classe.progresset.progress-stripedau <div>.
- Ensuite, à l'intérieur du <div> ci-dessus, ajoutez un <div> avec la classe.progress-baret la classeprogress-bar-*au <div> vide. Où * peut êtresuccess、info、warning、danger。
- Ajoutez un attribut style avec une largeur exprimée en pourcentage, par exemple style="60%" ; indique que la barre de progression est à la position 60%.
Regardons l'exemple suivant :
Exemple
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% terminé (succès)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% terminé (info)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% terminé (avertissement)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% terminé (danger)</span>
</div>
</div>
Essayez-le vous-même »
Le résultat est affiché ci-dessous :
Barres de progression animées
Suivez ces étapes pour créer une barre de progression animée :
- Ajoutez un <div> avec la classe.progresset.progress-stripedle <div>. Ajoutez également la classe.active。
- Ensuite, à l'intérieur du <div> ci-dessus, ajoutez un <div> avec la classe.progress-barau <div> vide.
- Ajoutez un attribut style avec une largeur exprimée en pourcentage, par exemple style="60%" ; indique que la barre de progression est à la position 60%.
Cela donnera aux rayures un effet de mouvement de droite à gauche.
Regardons l'exemple ci-dessous :
Exemple
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% terminé</span>
</div>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
Barres de progression empilées
Vous pouvez même empiler plusieurs barres de progression. Placez plusieurs barres de progression dans le même.progresspour obtenir l'empilement, comme le montre l'exemple ci-dessous :
Exemple
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% terminé</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% terminé (info)</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% terminé (avertissement)</span>
</div>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
Tailles de la barre de progression
Nous pouvons définir la taille de la barre de progression via l'attribut height :
Exemple
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
