Basic barre de progression
Une barre de progression peut être utilisé pour montrer un utilisateur dans quelle mesure le long il / elle est dans un processus.
Bootstrap fournit plusieurs types de barres de progression.
Une barre de progression par défaut dans Bootstrap ressemble à ceci:
Pour créer une barre de progression par défaut, ajouter une .progress classe à un <div> élément:
Exemple
<div class="progress">
<div class="progress-bar" role="progressbar"
aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"
style="width:70%">
<span class="sr-only">70%
Complete</span>
</div>
</div> Essayez - le vous - même » Remarque: Les barres de progression ne sont pas pris en charge dans Internet Explorer 9 et plus tôt (car ils utilisent des transitions et des animations CSS3 pour atteindre certains de leurs effets).
Remarque: Pour aider à améliorer l' accessibilité pour les personnes utilisant des lecteurs d'écran, vous devez inclure l' aria-* attributs.
Barre de progression avec une étiquette
Une barre de progression avec une étiquette ressemble à ceci:
Retirez le .sr-only classe à partir de la barre de progression pour afficher un pourcentage visible:
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 » Bars Colored Progress
les classes contextuelles sont utilisées pour fournir "signifie à travers les couleurs".
Les classes contextuelles qui peuvent être utilisés avec des barres de progression sont:
-
.progress-bar-success -
.progress-bar-info -
.progress-bar-warning -
.progress-bar-danger
L'exemple suivant montre comment créer des barres de progression avec les différentes classes contextuelles:
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% Complete
(success)
</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% Complete (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% Complete (warning)
</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% Complete (danger)
</div>
</div> Essayez - le vous - même » Bars à rayures Progrès
Les barres de progression peuvent également être rayées:
Ajouter classe .progress-bar-striped pour ajouter des rayures sur les barres de progression:
Exemple
<div class="progress">
<div class="progress-bar
progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100" style="width:40%">
40% Complete
(success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div
class="progress">
<div class="progress-bar progress-bar-danger
progress-bar-striped"
role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
style="width:70%">
70% Complete (danger)
</div>
</div> Essayez - le vous - même » Animated Progress Bar
Voici un "animated" barre de progression:
Ajouter classe .active pour animer la barre de progression:
Exemple
<div class="progress">
<div class="progress-bar
progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div> Essayez - le vous - même » Barres de progression Stacked
Les barres de progression peuvent également être empilés:
Créer une barre de progression empilés en plaçant plusieurs barres dans le même <div class="progress"> :
Exemple
<div class="progress">
<div class="progress-bar
progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar
progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar
progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div> Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»