Les barres de progression COMPOSANTS D’INTERFACE:Barres de progression

1. L’objectif

Les barres de progression sont très utilisées dans les interfaces d’administration des applications web. Bootstrap nous propose une série de barres de progression mises en forme de manière variée. 

Le dossier à télécharger pour ces exemples est nommé 08-Interface-03.

2. La barre de progression simple BARRES DE PROGRESSION:Simples

Commençons par une barre de progression simple, sur fond bleu.

Voici le code de cet exemple simple :

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

Analysons le code utilisé :

  • Le conteneur de la barre de progression est placé dans une boîte : <div class="progress">.

  • La barre de progression en elle-même est ajoutée dans une autre boîte <div> imbriquée dans la précédente :

<div class="progress-bar" role="progressbar" style="width: 25%" 
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 
  • La classe utilisée est .progress-bar.

  • La largeur d’affichage est indiquée dans le style en ligne : style="width: 25%".

  • Pour l’accessibilité...

couv_OW5BOO.png

Découvrez 

le livre :

Aussi inclus dans nos :

Précédent
Les alertes
Suivant
Les listes d'éléments