Barre de progression que Bootstrap doit apprendre tous les jours_compétences javascript-js tutoriel-php.cn

1. Barre de progression

Dans les pages Web, les effets des barres de progression ne sont pas rares, comme un système de notation, comme l'état de chargement, etc.

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 :

☑ Version MOINS : Fichier de code source progress-bars.less

☑ Version Sass : Fichier source _progress-bars.scss

☑ Compilez la version ultérieure : Ligne 4500 ~ Ligne 4575 du fichier bootstrap.css

Et le framework Bootstrap vous propose différents styles de barres de progression que tout le monde peut utiliser.

2. Barre de progression – style de base

Le framework Bootstrap fournit un style de base pour la barre de progression, une couleur d'arrière-plan de 100 % de largeur et une couleur en surbrillance pour indiquer la progression. 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 définit une couleur d'arrière-plan. Ses éléments enfants définissent une largeur, par exemple, le degré d'achèvement est de 30 %. (c'est-à-dire la largeur du conteneur parent). valeur d'échelle) et définissez-y une couleur d'arrière-plan de surbrillance.

1) Comment utiliser :

Le framework Bootstrap est également implémenté de cette manière. Il fournit deux conteneurs, le conteneur externe Utilisez le. style "progress" et les sous-conteneurs utilisent le style "progress-bar". Parmi eux, progress est utilisé pour définir le style de conteneur de la barre de progression, et progress-bar est utilisé pour limiter la progression de la barre de progression. La méthode d'utilisation est très simple :

2), principe de mise en œuvre

Comme mentionné précédemment, une telle barre de progression de base est principalement divisée en deux parties :

Le style de progression définit principalement la couleur d'arrière-plan, la hauteur du conteneur, l'espacement, etc. du conteneur de la barre de progression :

/bootstrap.css file line 4516~line 4524/

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

Copier après la connexion

Bien que le style de la barre de progression définisse la direction de la progression, il est important de définir la couleur d'arrière-plan et l'effet de transition de la barre de progression :

/lines 4525~4538 du bootstrap.css file/

.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

3), optimisation structurelle :

Bien que cela permette d'obtenir l'effet de barre de progression de base, il est un peu difficile pour les personnes handicapées de naviguer sur le Web, nous pouvons donc améliorer la structure (plus sémantiquement conviviale) :

40% Complete

Copier après la connexion

1>, fonction d'attribut de rôle : tell. le moteur de recherche que la fonction de ce div est une barre de progression.

2>, effet d'attribut aria-valuenow="40" : la progression actuelle de la barre de progression est de 40 %.

3>, fonction d'attribut aria-valuemin="0" : la valeur minimale de la barre de progression est de 0 %.

4>, fonction d'attribut aria-valuemax="100" : la valeur maximale de la barre de progression est de 100 %.

3. Barre de progression – barre de progression colorée

La barre de progression dans le framework Bootstrap est la même que la boîte de message d'avertissement afin de donner à l'utilisateur une meilleure visibilité. expérience, il est également basé sur différents états configurés avec différentes couleurs de barre de progression. On l'appelle ici barre de progression colorée, qui comprend principalement les quatre types suivants :

☑ progress-bar-info : représente la barre de progression des informations, et la couleur de la barre de progression est bleue Couleur

☑ progress-bar-success : indique une barre de progression réussie, et 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

☑ progression -bar-danger : indique une barre de progression d'erreur, la couleur de la barre de progression est rouge

1) Comment utiliser :

L'utilisation spécifique est très simple, il vous suffit de suivre la progression de base. Ajoutez le nom de la classe correspondante.

2), principe de mise en œuvre :

Par rapport à la barre de progression de base, la barre de progression des couleurs présente certains changements dans la couleur de la progression barre de style. Le code de style correspondant est le suivant :

/bootstrap.css fichier ligne 4548 ~ ligne 4550/

.progress-bar-success {
 background-color: #5cb85c;
}
/*bootstrap.css文件第4555行～第4557行*/
.progress-bar-info {
 background-color: #5bc0de;
}
/*bootstrap.css文件第4562行～第4564行*/
.progress-bar-warning {
 background-color: #f0ad4e;
}
/*bootstrap.css文件第4569行～第4571行*/
.progress-bar-danger {
 background-color: #d9534f;
}

Copier après la connexion

4. Barre de progression – Barre de progression stripes

En plus de fournir une barre de progression colorée, le framework Bootstrap fournit également une barre de progression rayée. Cette barre de progression rayée est implémentée à l'aide de dégradés linéaires CSS3 sans aucune aide. 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 votre barre de progression aient un effet de couleur. comme la progression colorée, il vous suffit d'ajouter le nom de la classe de couleur correspondante à la barre de progression, comme mentionné dans la barre de progression des couleurs précédente.

Jetons un coup d'œil à la structure de création d'une barre de progression rayée : ,

1), implémentation originale :

Comme mentionné précédemment, implémentation stripes La barre de progression utilise principalement le dégradé linéaire de CSS3. Le code spécifique est le suivant :

/bootstrap.css fichier ligne 4539~ligne 4547/

.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

同样的，条纹进度条对应的每种状态也有不同的颜色，使用方法与彩色进度条一样。只是样式上做了一定的调整：

/bootstrap.css文件第4551行～第4554行/

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

Copier après la connexion

/bootstrap.css文件第4558行～第4561行/

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

Copier après la connexion

/bootstrap.css文件第4565行～第4568行/

.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);
}
/*bootstrap.css文件第4572行～第4575行*/
.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

5、进度条–动态条纹进度条

使用方法：

在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：

<br/>

Copier après la connexion

1）、实现原理：

为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。

/bootstrap.css文件第4500行～第4515行/

@-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

了解CSS3的同学都知道，@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画“progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效。

<br/>

调用动画对应的样式代码如下：

/bootstrap.css文件第4544行～第4547行/

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

Copier après la connexion

运行效果如下：

特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。

6、进度条–层叠进度条

Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：

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

运行效果如下：

7、进度条–带Label的进度条

上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景。

1）、实现方法：

只需要在进度条中添加你需要的值，如：

20%

Copier après la connexion

还有一种特殊情形，当进度条处于开始位置，也就是进度条的值为0%时，内容是否会撑开一定的宽度，让进度条具有颜色呢？如果是，这不是我们需要的效果，如果不是，又是怎么实现的呢？我们先来看一个这样的示例：

0%

Copier après la connexion

2）、原理分析：<br/>

效果告诉我们，当进度为0%，进度条颜色并没有显示出来，那是因为Bootstrap在样式上做了一定的处理。

/bootstrap.css文件第4748行~第4759行/

.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
 min-width: 30px;
}
.progress-bar[aria-valuenow="0"] {
 min-width: 30px;
 color: #777;
 background-color: transparent;
 background-image: none;
 -webkit-box-shadow: none;
  box-shadow: none;
}

Copier après la connexion

注：这段代码BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有这段代码，同时也说明，Bootstrap在不断的完善之中。

以上就是关于Bootstrap进度条的全部内容介绍，并有详细的Bootstrap教程，希望对大家的学习有所帮助。