Comment créer une barre de progression dans bootstrap

Pour créer une barre de progression de base, vous devez utiliser le conteneur .progress et l'élément .progress-bar, et définir la largeur via style = "width: 50%;" et ajouter des attributs Aria pour améliorer l'accessibilité; 2. Vous pouvez ajouter directement du texte tel que "75%" pour afficher les balises de progression dans la barre .progress; 3. Vous pouvez définir différentes couleurs via BG-Success, BG-Warning, BG-Danger et d'autres classes; 4. Ajouter. Progress-barre pour obtenir l'effet de bande et combiner .Progress-bar-animé pour faire bouger la bande dynamiquement; 5. multiple .progress-bar peut être empilé dans le même conteneur .progress pour afficher la progression combinée, et la largeur totale de chaque segment ne doit pas dépasser 100%.

La création d'une barre de progrès dans Bootstrap est simple et peut être effectuée à l'aide de classes utilitaires intégrées de Bootstrap. Vous trouverez ci-dessous un guide étape par étape pour vous aider à créer une barre de progression de base, à la personnaliser et à ajouter des fonctionnalités telles que des étiquettes ou plusieurs segments.

1. Bas de progrès de base

Pour créer une barre de progression de base, utilisez la structure suivante:

 <div class = "progress">
  <div class = "progress-bar" role = "ProgressBar" style = "width: 50%;" aria-valuenow = "50" aria-valemin = "0" aria-valemax = "100"> 50% </div>
</div>

Explication:

• La div externe avec classe .progress agit comme le conteneur.
• La div intérieure avec .progress-bar montre la partie remplie.
• style="max-width:90%" définit la quantité de barre remplie.
• Les attributs Aria améliorent l'accessibilité.

2. Ajout d'étiquettes

Pour afficher le pourcentage de progrès à l'intérieur de la barre, incluez le texte dans la .progress-bar :

 <div class = "progress">
  <div class = "progress-bar" role = "ProgressBar" style = "width: 75%;" aria-valuenow = "75" aria-valemin = "0" aria-valuemax = "100"> 75% </div>
</div>

Le texte "75%" apparaîtra à l'intérieur de la barre. Assurez-vous que la barre est suffisamment large pour montrer clairement le texte.

3. Barres de progression colorées

Bootstrap prend en charge différentes classes contextuelles pour le style:

 <div class = "progress">
  <div class = "Progress-bar BG-Success" Style = "Width: 25%;"> 25% </div>
</div>

<div class = "progress">
  <div class = "progress-bar bg-warning" style = "width: 50%;"> 50% </div>
</div>

<div class = "progress">
  <div class = "progress-bar bg-danger" style = "width: 75%;"> 75% </div>
</div>

Cours de couleurs disponibles:

• bg-primary
• bg-secondary
• bg-success
• bg-danger
• bg-warning
• bg-info
• bg-light
• bg-dark

4. Bars rayés et animés

Pour un effet rayé, ajoutez .progress-bar-striped

 <div class = "progress">
  <div class = "Progress-Bar Progress-Bar-Striped" Style = "Width: 60%;"> </div>
</div>

Pour animer les rayures, incluez .progress-bar-animated :

 <div class = "progress">
  <div class = "Progress-Bar Progress Progress-Bar-Striped Progress-Bar-Animé" Style = "Width: 60%;" role = "ProgressBar"> </div>
</div>

L'animation ne fonctionne qu'avec la classe rayée et nécessite une prise en charge JavaScript (intégrée dans Bootstrap).

5. plusieurs barres de progrès (empilées)

Vous pouvez empiler plusieurs barres pour afficher des progrès combinés:

 <div class = "progress">
  <div class = "Progress-bar BG-Success" Style = "Width: 30%;"> 30% </div>
  <div class = "progress-bar bg-warning" style = "width: 20%;"> 20% </div>
  <div class = "progress-bar bg-danger" style = "width: 10%;"> 10% </div>
</div>

Ceci est utile pour montrer les contributions de différentes catégories.

Notes finales

• Incluez toujours role="progressbar" et Aria Attributs pour l'accessibilité.
• La largeur de la barre de progression est contrôlée via style en ligne ou dynamiquement avec JavaScript.
• Assurez-vous que la largeur totale des barres empilées ne dépasse pas à 100%.

Voilà - Bootstrap facilite la création de barres de progression réactives et attrayantes visuellement avec un code minimal.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!