HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Barres de progression Bootstrap

❮ Précédent Suivant ❯

Barre de progression de base

Une barre de progression peut être utilisée pour montrer à un utilisateur où il en est dans un processus.

Bootstrap fournit plusieurs types de barres de progression.

Une barre de progression par défaut dans Bootstrap ressemble à ceci :

70 % terminé

Pour créer une barre de progression par défaut, ajoutez une .progressclasse à 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>

Remarque : les barres de progression ne sont pas prises en charge dans Internet Explorer 9 et les versions antérieures (car elles utilisent des transitions et des animations CSS3 pour obtenir certains de leurs effets).

Remarque : Pour aider à améliorer l'accessibilité pour les personnes utilisant des lecteurs d'écran, vous devez inclure les attributs aria-*.

Barre de progression avec étiquette

Une barre de progression avec une étiquette ressemble à ceci :

70%

Supprimez le .sr-onlycours 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>

Barres de progression colorées

Les classes contextuelles sont utilisées pour donner du "sens à travers les couleurs".

Les classes contextuelles pouvant être utilisées avec les barres de progression sont :

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40 % terminé (succès)
50 % terminé (infos)
60 % terminé (avertissement)
70 % terminé (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>

Barres de progression rayées

Les barres de progression peuvent également être rayées :

40 % terminé (succès)
50 % terminé (infos)
60 % terminé (avertissement)
70 % terminé (danger)

Ajoutez une classe .progress-bar-stripedpour ajouter des rayures aux 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>

Barre de progression animée

40%

Ajoutez une classe .activepour 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>

Barres de progression empilées

Les barres de progression peuvent également être empilées :

Espace libre
Avertissement
Danger

Créez une barre de progression empilée 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>

Testez-vous avec des exercices

Exercer:

Ajoutez les classes appropriées pour que ce code HTML se comporte comme une barre de progression.

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>


❮ Précédent Suivant ❯