Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Barres de progression Bootsrap

Dans ce tutoriel, je vous propose de découvrir les barres de progression de Bootstrap, trés utiles pour afficher des états d'avancement.
Les barres de progression utilisent des transitions et des animations en CSS3. Ces fonctionnalités ne sont pas prises en charge dans les anciens navigateurs comme Internet Explorer 9 et versions antérieures. Concernant les navigateurs Apple, Opera 12 ne supporte pas les animations.

Exemple basique

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% effectué</span>
</div>
</div>

Exemple

60% effectué

Avec une étiquette

Supprimer la balise <span> avec classe .sr-only pour afficher le pourcentage de barre de progression.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>

Exemple

60%
Si les pourcentages sont trés faibles, il faudra ajouter un min-width dans la balise style pour pouvoir afficher l'étiquette de valeur.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>

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

Exemple

0%
2%

Avec de la couleur

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% effectué (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% effectué </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: 60%">
<span class="sr-only">60% effectué (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% effectué (danger)</span>
</div>
</div>

Exemple

40% effectué (success)
20% effectué
60% effectué (warning)
80% effectué (danger)

Rayé

Réalisé à partir de dégradés. Ne passe pas dans les version d'Interrnet Explorer inférieur à 9.
<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%">
<span class="sr-only">40% effectué (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% effectué </span>
</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%">
<span class="sr-only">60% effectué (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% effectué (danger)</span>
</div>
</div>

Exemple

40% effectué (success)
20% effectué
60% effectué (warning)
80% effectué (danger)

Animé

Il suffit d'ajouter la classe .active à la classe .progress-bar-striped pour animer les barres de droite à gauche.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% effectué (success)</span>
</div>
</div>

Exemple

40% effectué (success)

Empilé

Pour empiler les couleurs, il suffit de placer les éléments dans la même classe .progress.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% effectué (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% effectué (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% effectué (danger)</span>
<div>
</div>

Exemple

35% effectué (success)
20% effectué (warning)
10% effectué (danger)