Exemples 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
Ensuite, à l'intérieur du
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!

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

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

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.

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é.

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é.

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.

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

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.


Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

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 !

Article chaud

Outils chauds

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
Recommandé : version Win, prend en charge les invites de code !

SublimeText3 Linux nouvelle version
Dernière version de SublimeText3 Linux

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

Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
