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

1. L’objectif BARRES DE PROGRESSION:Insérer

Les barres de progression sont très utilisées dans les interfaces d’administration des applications web. Bootstrap nous propose toute 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é...

Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les alertes
Suivant
Les listes d'éléments