recherche
Maisoninterface Webtutoriel HTMLExemples des différentes barres de progression de Bootstrap

Ce chapitre expliquera la barre de progression Bootstrap. Dans ce didacticiel, vous verrez comment utiliser Bootstrap pour créer une barre de progression pour les états de chargement, de redirection ou d'action.

Les barres de progression Bootstrap utilisent des transitions et des animations CSS3 pour obtenir cet effet. Internet Explorer 9 et les versions antérieures et anciennes de Firefox ne prennent pas en charge cette fonctionnalité, et Opera 12 ne prend pas en charge les animations.

Barre de progression par défaut

Les étapes pour créer une barre de progression de base sont les suivantes :

Ajouter un

avec la classe .progress .

Ensuite, à l'intérieur du

ci-dessus, ajoutez un
vide avec la classe .progress-bar .

Ajoutez un attribut de style avec une largeur exprimée en pourcentage, par exemple style="60%" ; signifie que la barre de progression est à la position 60 %.

Regardons l'exemple suivant :

Exemple

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

Style de base

Le framework Bootstrap fournit une barre de progression Basic style, une couleur d'arrière-plan de 100 % de largeur, puis une couleur de surbrillance pour indiquer la progression de l'achèvement. En fait, il est très simple de créer une telle barre de progression. Généralement, deux conteneurs sont utilisés. Le conteneur extérieur a une certaine largeur et une couleur d'arrière-plan est définie. L'élément enfant définit une largeur. Par exemple, le degré d'achèvement est de 30. % (c'est-à-dire le rapport de largeur du conteneur parent). ), et définissez une couleur d'arrière-plan de surbrillance pour celui-ci

Le framework Bootstrap est également implémenté de cette manière. Il fournit deux conteneurs. style "progress", et le sous-conteneur utilise le style "progress-bar". Parmi eux, progress est utilisé pour définir le style de conteneur de la barre de progression, tandis que progress-bar est utilisé pour limiter la progression de la barre de progression

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;  transition: width .6s ease;
}
<div>   <div></div>
</div>

Mises à jour d'accessibilité Une bonne façon de l'écrire est la suivante

<div><div><span>40% Complete</span></div></div>

L'attribut role indique au moteur de recherche que ce div fonctionne comme une barre de progression aria-valuenow ; L'attribut ="40" indique la barre de progression actuelle de 40 % ; L'attribut aria-valuemin="0" indique que la valeur minimale de la barre de progression est de 0 % ; l'attribut aria-valuemax="100" indique la valeur maximale de ; la barre de progression doit être à 100 %


Barre de progression colorée

La barre de progression dans le framework Bootstrap est la même que l'avertissement boîte de message. Afin de donner à l'utilisateur une meilleure expérience, différentes couleurs de barre de progression sont configurées en fonction des différents états. On l'appelle ici une barre de progression colorée, qui comprend principalement les quatre types suivants :

 ☑ progress-bar-info : Indique la barre de progression des informations, la couleur de la barre de progression est bleue

☑ progress-bar- success : Indique une barre de progression réussie, la couleur de la barre de progression est verte

 ☑ Progress-bar-warning : Indique une barre de progression d'avertissement, la couleur de la barre de progression est jaune

 ☑ Progress-bar-danger : Indique une erreur Barre de progression, la couleur de la barre de progression est rouge

L'utilisation spécifique est très simple Il vous suffit d'ajouter le nom de la classe correspondante au basic. progression. Par rapport à la barre de progression de base, la barre de progression des couleurs est la couleur de la barre de progression.

.progress-bar-success {
  background-color: #5cb85c;
}.progress-bar-info {
  background-color: #5bc0de;
}.progress-bar-warning {
  background-color: #f0ad4e;
}.progress-bar-danger {
  background-color: #d9534f;
}
<div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>

Barre de progression rayée.

En plus de fournir une barre de progression colorée dans le framework Bootstrap, fournit une barre de progression rayée, qui est implémentée à l'aide d'un dégradé linéaire CSS3 sans utiliser d'images. Pour utiliser la barre de progression rayée dans le framework Bootstrap, il vous suffit d'ajouter le nom de classe "progress-striped" au conteneur "progress" de la barre de progression. Bien sûr, si vous souhaitez que les rayures de la barre de progression aient un effet de couleur. comme la progression colorée, il vous suffit d'ajouter le nom de la classe "progress-striped" à la barre de progression. Ajoutez le nom de la classe de couleur correspondante à la barre

[Note] Vous pouvez créer un effet de bande pour la barre de progression. à travers les dégradés. Le navigateur IE9 ne prend pas en charge

.progress-striped .progress-bar {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
<div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>


Rayures dynamiques

Afin de faire bouger la barre de progression rayée, le framework Bootstrap fournit également une barre de progression rayée dynamique. Son principe de mise en œuvre s'effectue principalement grâce à l'animation de CSS3. Tout d'abord, une animation de barres de progression est créée via @keyframes. Cette animation fait principalement une chose, qui consiste à changer la position de l'image d'arrière-plan, qui est la valeur de background-position. Parce que la barre de progression rayée est créée via le dégradé linéaire de CSS3 et que le dégradé linéaire implémente l'image d'arrière-plan dans l'arrière-plan correspondant

[Remarque] Le navigateur IE9 ne prend pas en charge

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {background-position: 0 0;
  }}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {background-position: 0 0;
  }}

Dans le framework Bootstrap, ajoutez un nom de classe "active" au conteneur de barre de progression "progress", et laissez l'animation "progress-bar-stripes" prendre effet au chargement du document, pour qu'il apparaisse Effet d'animation de déplacement de droite à gauche

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;  animation: progress-bar-stripes 2s linear infinite;
}
<div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>


Barre de progression en cascade

En plus des barres de progression mentionnées ci-dessus, le framework Bootstrap fournit également une barre de progression en cascade. Les barres de progression en cascade peuvent placer des barres de progression dans différents états ensemble et les disposer horizontalement

Mettez plusieurs barres de progression dans le même .progress pour les faire apparaître empilées

<div>
  <div>
<span>35% Complete (success)</span>
  </div>
  <div>
<span>20% Complete (warning)</span>
  </div>
  <div>
<span>10% Complete (danger)</span>
  </div>
</div>


[Remarque] La somme des barres de progression empilées ne peut pas être supérieure à 100 %

<div>
  <div></div>
  <div></div>
  <div></div>
</div>


 

提示标签

  在实际开发中,有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值,Bootstrap考虑了这种使用场景,只需要在进度条中添加需要的值

<div><div>20%</div></div>


  在展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 min-width 属性 

<div><div>0%</div></div><div><div>0%</div></div><div><div>1%</div></div><div><div>1%</div></div>


 

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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Quelle est la balise racine dans un document HTML?Quelle est la balise racine dans un document HTML?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentalis.itSercesasthetop-lelement thatchicapsulatel alothercontent, assurant des produits de base de la propriété.

Les étiquettes et les éléments HTML sont-ils la même chose?Les étiquettes et les éléments HTML sont-ils la même chose?Apr 28, 2025 pm 05:44 PM

L'article explique que les balises HTML sont des marqueurs de syntaxe utilisés pour définir les éléments, tandis que les éléments sont des unités complètes, y compris des balises et du contenu. Ils travaillent ensemble pour structurer les pages Web. Counomage de Character: 159

Quelle est la signification de & lt; head & gt; et & lt; body & gt; Tag dans HTML?Quelle est la signification de & lt; head & gt; et & lt; body & gt; Tag dans HTML?Apr 28, 2025 pm 05:43 PM

L'article traite des rôles de & lt; Head & gt; et & lt; body & gt; Tags dans HTML, leur impact sur l'expérience utilisateur et les implications SEO. Une bonne structuration améliore la fonctionnalité du site Web et l'optimisation des moteurs de recherche.

Quelle est la différence entre & lt; Strong & gt;, & lt; b & gt; Tags et & lt; em & gt;, & lt; i & gt; Tags?Quelle est la différence entre & lt; Strong & gt;, & lt; b & gt; Tags et & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PM

L'article traite des différences entre les balises HTML ,,, et se concentrant sur leurs utilisations sémantiques et présentatrices et leur impact sur le référencement et l'accessibilité.

Veuillez expliquer comment indiquer le jeu de caractères utilisé par un document en HTML?Veuillez expliquer comment indiquer le jeu de caractères utilisé par un document en HTML?Apr 28, 2025 pm 05:41 PM

L'article discute de la spécification du codage des caractères dans HTML, en se concentrant sur l'UTF-8. Problème principal: assurer un affichage correct du texte, prévenir les caractères brouillés et améliorer le référencement et l'accessibilité.

Quelles sont les différentes balises de formatage dans HTML?Quelles sont les différentes balises de formatage dans HTML?Apr 28, 2025 pm 05:39 PM

L'article traite de diverses balises de formatage HTML utilisées pour structurer et styliser le contenu Web, mettant l'accent sur leurs effets sur l'apparence du texte et l'importance des balises sémantiques pour l'accessibilité et le référencement.

Quelle est la différence entre l'attribut «ID» et l'attribut «classe» des éléments HTML?Quelle est la différence entre l'attribut «ID» et l'attribut «classe» des éléments HTML?Apr 28, 2025 pm 05:39 PM

L'article traite des différences entre les attributs «ID» et «classe» de HTML, en se concentrant sur leur caractère unique, leur but, leur syntaxe CSS et leur spécificité. Il explique comment leur utilisation a un impact sur le style et les fonctionnalités de la page Web et fournit les meilleures pratiques pour

Quel est l'attribut «classe» dans HTML?Quel est l'attribut «classe» dans HTML?Apr 28, 2025 pm 05:37 PM

L'article explique le rôle de l'attribut HTML «classe» dans le regroupement des éléments pour le style et la manipulation JavaScript, en le contrastant avec l'attribut «ID» unique.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

MinGW - GNU minimaliste pour Windows

MinGW - GNU minimaliste pour Windows

Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire