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 dc6dce4a544fdca2df29d5ac0ea9906b avec la classe .progress .

Ensuite, à l'intérieur du dc6dce4a544fdca2df29d5ac0ea9906b ci-dessus, ajoutez un dc6dce4a544fdca2df29d5ac0ea9906b 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;
}

b8201876fc96a5058af18d6629bf1b0e   6708c431ccdba4242fbfa419c9b36f9616b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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

b8201876fc96a5058af18d6629bf1b0e9d99875cf552fcccb61087048cf5934b64952123ee1a1d9b385bc3bca58612f040% Complete54bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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;
}

b8201876fc96a5058af18d6629bf1b0e014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0ee8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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);
}

3a8b4b7f756725c3a8015596652629dcd3a8cd28dd0113c1803d2db27c9892d916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dce8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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;
}

da7fee9992280785cbb141b7b5e9ce54d3a8cd28dd0113c1803d2db27c9892d916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54e8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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

b8201876fc96a5058af18d6629bf1b0e
  7f809a2d1738ac40f771f8de45f90c1464952123ee1a1d9b385bc3bca58612f035% Complete (success)54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba68
  695093a9fbb94d989f8d2b1cfdfdf83664952123ee1a1d9b385bc3bca58612f020% Complete (warning)54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba68
  70f0568bf8bd95907c2e4a17779872a264952123ee1a1d9b385bc3bca58612f010% Complete (danger)54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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

b8201876fc96a5058af18d6629bf1b0e
  ab4220bd441a1f0392067f147af09e9816b28748ea4df4d9c2150843fecfba68
  64a3a6ae05df329d95792612c59b877c16b28748ea4df4d9c2150843fecfba68
  8b5d5c690bf4e2e60a71f472e69f82a216b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

 

提示标签

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

b8201876fc96a5058af18d6629bf1b0e2280bf5905e2e71bbdea92945e22be8a20%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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

b8201876fc96a5058af18d6629bf1b0ec02538b6b470d7f3269c5214ddb106000%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e99d28bbb7f49eaebba7b3b32372f31030%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e586f34b1d57516e3df8ed2b1a3e08cc41%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e99d28bbb7f49eaebba7b3b32372f31031%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

 

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!