communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Connaissance détaillée des compétences du composant_javascript de la barre de progression Bootstrap

Connaissance détaillée des compétences du composant_javascript de la barre de progression Bootstrap

WBOY
Libérer： 2016-05-16 15:02:48
original
1909 Les gens l'ont consulté

Dans les pages Web, des effets de barre de progression sont souvent observés, tels que : le système de bissection, l'état de chargement, etc. Le composant de barre de progression utilise les attributs de transition et d'animation de CSS3 pour compléter certains effets spéciaux. Ces effets spéciaux sont dans IE9 et. versions inférieures, Firefox Il n'est pas pris en charge dans les anciennes versions et Opera 12 ne prend pas en charge l'attribut d'animation.

La barre de progression est la même que celle des autres composants indépendants. Les développeurs peuvent choisir la version correspondante en fonction de leurs propres besoins :

MOINS : barres de progression.less

SASS : _progress-bars.scss

Barre de progression de base

Principe de mise en œuvre :

Deux conteneurs sont requis. Le conteneur externe utilise le nom de classe .progress et le sous-conteneur utilise le nom de classe .progress-bar ; .progress est utilisé pour définir la couleur d'arrière-plan du conteneur de la barre de progression, la hauteur et l'espacement du conteneur, etc. ; et .progress-bar définit la direction de progression, la couleur d'arrière-plan et l'effet de transition de la barre de progression ; ce qui suit est le code source CSS : 

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;
}
Copier après la connexion

Exemple : 

<div class="progress">
<div class="progress-bar" style="width:30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">30%</span>
</div>
</div>
Copier après la connexion

Attribut de rôle : indiquez aux moteurs de recherche que ce div fonctionne comme une barre de progression

 ;

Fonction d'attribut aria-valuenow="30" : la barre de progression actuelle est de 40 %

Fonction d'attribut aria-valuemin="0" : la valeur minimale de la barre de progression est de 0%

Fonction d'attribut aria-valuemax="100" : la valeur maximale de la barre de progression est de 100 %

Vous pouvez supprimer la balise avec la classe .sr uniquement du composant de barre de progression et laisser la progression actuelle s'afficher 

<div class="progress">
<div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >40%</div>
</div>
Copier après la connexion

Barre de progression colorée

La barre de progression colorée est la même que la barre de progression d'avertissement. Afin de donner aux utilisateurs une meilleure expérience, différentes couleurs de barre de progression sont configurées en fonction de différents états, comprenant principalement les quatre types suivants :

progress-bar-info : indique la barre de progression des informations, bleue

progress-bar-success : indique une barre de progression réussie, verte

progress-bar-warning : indique une barre de progression d'avertissement, jaune

progress-bar-danger : indique la barre de progression de l'erreur, rouge

Code source CSS : 

.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}
Copier après la connexion

Comment utiliser :

Ajoutez simplement le nom de la classe correspondante à la barre de progression de base

Exemple : 

<h1>彩色进度条</h1>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>
Copier après la connexion

L'effet est le suivant :

Barre de progression rayée

La barre de progression rayée est implémentée en utilisant le dégradé linéaire de CSS3 sans utiliser d'images. Pour utiliser la barre de progression rayée, ajoutez simplement le nom de classe "progress-striped" au conteneur.progress de la barre de progression. la bande de progression à colorer La progression est la même, avec les effets de couleurs, il suffit d'ajouter le nom de la classe de couleur correspondante

à la barre de progression

Ce qui suit est le code source du style .progress-striped : 

.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;
}
Copier après la connexion

Chaque état correspondant à la progression de la bande a également une couleur différente

.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);
}
Copier après la connexion

Jetons un coup d'œil à l'application de la barre de progression rayée : 

<h1>条纹进度条</h1>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>
Copier après la connexion


Barre de progression à rayures dynamiques

Sur la base des deux classes de barre de progression .progress et .progress-striped, l'ajout du nom de classe .active peut réaliser la barre de progression dynamique à rayures.

Le principe de mise en œuvre est principalement réalisé via l'animation 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

Ce qui suit est le code source CSS : 

@-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;
}
}
Copier après la connexion

@keyframes crée uniquement un effet d'animation. Si nous voulons que la barre de progression bouge vraiment, nous devons appeler l'animation "progress-bar-stripes" créée par @keyframes d'une certaine manière, et déclencher l'animation pour qu'elle prenne effet. à travers un événement. 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 lorsque le document est chargé

Le code de style correspondant à l'appel de l'animation est le suivant : 

.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
Copier après la connexion

Exemple : 

<h1>动态条纹进度条</h1>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>
</div>
Copier après la connexion


效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：


层叠进度条：

层叠进度可以将不容状态的进度条放在一起，按水平方式排列

例子：

<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
Copier après la connexion

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。

下面来看一个例子：

<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
Copier après la connexion

关于Bootstrap进度条组件知识详解到此就介绍了，希望对大家有所帮助！

Étiquettes associées：
bootstrap组件 bootstrap进度条组件
source：php.cn
Article précédent：Le code jQuery implémente le menu dans le coin supérieur droit de la boîte de dialogue pour fermer ×_jquery Article suivant：BootStrap glyphicons icône de police implémentation method_javascript compétences
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ? Voici mon composant de style Sort.js : <SortWrapper><SortText>SortBy</SortT...
Depuis 2024-04-06 21:28:37
0
1
2257
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
La mise à jour du statut ne fonctionne pas dans React-Native sur Android J'ai du code qui contient des paires d'images dans une galerie horizontale pouvant être gl...
Depuis 2024-04-06 16:54:10
0
1
410
React Three Fiber : Pourquoi mes événements de défilement sont-ils en retard ? Dans ReactThreeFiber, j'ai un composant React qui génère un sprite que je souhaite conserv...
Depuis 2024-04-06 13:39:24
0
1
410
Résoudre les problèmes de build de production des composants Web Vue3 J'essaie de migrer mes composants vue2web vers vue3, bien que le problème survienne lorsqu...
Depuis 2024-04-06 12:43:37
0
1
473
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal