Fortschrittsbalken, den Bootstrap jeden Tag erlernen muss_Javascript-Fähigkeiten

1. Fortschrittsbalken

Auf Webseiten sind die Auswirkungen von Fortschrittsbalken, wie z. B. ein Bewertungssystem, wie z. B. der Ladestatus usw., keine Seltenheit.

Der Fortschrittsbalken ist derselbe wie bei anderen unabhängigen Komponenten. Entwickler können die entsprechende Version entsprechend ihren eigenen Anforderungen auswählen:

☑ WENIGER Version: Quellcode-Datei progress-bars.less

☑ Sass-Version: Quelldatei _progress-bars.scss

☑ Spätere Version kompilieren: Zeile 4500~Zeile 4575 der Datei „bootstrap.css“

Und das Bootstrap-Framework bietet Ihnen verschiedene Arten von Fortschrittsbalken, die jeder verwenden kann.

2. Fortschrittsbalken – Grundstil

Das Bootstrap-Framework bietet einen Grundstil für den Fortschrittsbalken, eine Hintergrundfarbe von 100 % Breite und eine hervorgehobene Farbe, um den Abschlussfortschritt anzuzeigen. Tatsächlich ist es sehr einfach, einen solchen Fortschrittsbalken zu erstellen. Der äußere Container hat eine bestimmte Breite und legt eine Hintergrundfarbe fest. Der Fertigstellungsgrad beträgt beispielsweise 30 %. (d. h. die Breite des übergeordneten Containers) und legen Sie eine Hintergrundfarbe für die Hervorhebung fest.

1) Verwendung:

Das Bootstrap-Framework wird ebenfalls auf diese Weise implementiert. Es stellt zwei Container bereit, den äußeren Container „Fortschritts“-Stil und Untercontainer verwenden den „Fortschrittsbalken“-Stil. Unter anderem wird der Fortschritt verwendet, um den Containerstil des Fortschrittsbalkens festzulegen, und der Fortschrittsbalken wird verwendet, um den Fortschritt des Fortschrittsbalkens zu begrenzen. Die Verwendungsmethode ist sehr einfach:

2), Implementierungsprinzip

Wie bereits erwähnt, ist ein solcher grundlegender Fortschrittsbalken hauptsächlich in zwei Teile unterteilt:

Der Fortschrittsstil legt hauptsächlich die Hintergrundfarbe, die Containerhöhe, den Abstand usw. des Fortschrittsbalkencontainers fest:

/bootstrap.css Dateizeile 4516~Zeile 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);
}

Während der Fortschrittsbalkenstil die Fortschrittsrichtung festlegt, ist es wichtig, die Hintergrundfarbe und den Übergangseffekt des Fortschrittsbalkens festzulegen:

/lines 4525~4538 der 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;
}

3), Strukturoptimierung:

Obwohl dadurch der grundlegende Fortschrittsbalkeneffekt erreicht wird, Für behinderte Menschen ist es etwas schwierig, im Internet zu surfen, daher können wir die Struktur besser (semantisch freundlicher) gestalten:

40% Complete

1>, Rollenattributfunktion: tell Die Suchmaschine gibt an, dass die Funktion dieses Div ein Fortschrittsbalken ist.

2>, aria-valuenow="40"-Attributeffekt: Der aktuelle Fortschrittsbalken beträgt 40 %.

3>, aria-valuemin="0"-Attributfunktion: Der Mindestwert des Fortschrittsbalkens beträgt 0 %.

4>, aria-valuemax="100" Attributfunktion: Der Maximalwert des Fortschrittsbalkens beträgt 100 %.

3. Fortschrittsbalken – farbiger Fortschrittsbalken

Der Fortschrittsbalken im Bootstrap-Framework ist derselbe wie das Warnmeldungsfeld, um dem Benutzer eine bessere Übersicht zu geben Erfahrungsgemäß basiert es auch darauf, dass verschiedene Zustände mit unterschiedlichen Fortschrittsbalkenfarben konfiguriert sind. Es wird hier als farbiger Fortschrittsbalken bezeichnet und umfasst hauptsächlich die folgenden vier Typen:

☑ Fortschrittsbalken-Info: stellt den Informationsfortschrittsbalken und die Farbe dar Farbe des Fortschrittsbalkens ist blau

☑ progress-bar-success: zeigt einen erfolgreichen Fortschrittsbalken an und die Farbe des Fortschrittsbalkens ist grün

☑ progress -bar-warning: zeigt einen warnenden Fortschrittsbalken an, die Farbe des Fortschrittsbalkens ist gelb

☑ Fortschritt -bar-danger: zeigt einen Fehler an. Fortschrittsbalken, die Farbe des Fortschrittsbalkens ist rot

1) Verwendung:

Die spezifische Verwendung ist sehr einfach. Sie müssen nur den grundlegenden Fortschritt befolgen und den entsprechenden Klassennamen hinzufügen.

2), Implementierungsprinzip:

Im Vergleich zum grundlegenden Fortschrittsbalken weist der Farbfortschrittsbalken bestimmte Änderungen in der Farbe des Fortschritts auf Der entsprechende Stilcode lautet wie folgt:

/bootstrap.css Dateizeile 4548 ~ Zeile 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;
}

4. Fortschrittsbalken – Streifen-Fortschrittsbalken

Zusätzlich zur Bereitstellung eines farbigen Fortschrittsbalkens bietet das Bootstrap-Framework auch einen gestreiften Fortschrittsbalken, der ohne Hilfe von CSS3-Verläufen implementiert wird. Um den gestreiften Fortschrittsbalken im Bootstrap-Framework zu verwenden, müssen Sie nur den Klassennamen „progress-striped“ zum Container „progress“ des Fortschrittsbalkens hinzufügen. Natürlich, wenn Sie möchten, dass Ihre Fortschrittsbalkenstreifen einen Farbeffekt haben Wie beim farbigen Fortschritt müssen Sie nur den entsprechenden Farbklassennamen zum Fortschrittsbalken hinzufügen, wie im vorherigen Farbfortschrittsbalken erwähnt.

Werfen wir einen Blick auf die Struktur zum Erstellen eines gestreiften Fortschrittsbalkens: ,

1), ursprüngliche Implementierung:

Wie bereits erwähnt, Implementierung Streifen Der Fortschrittsbalken verwendet hauptsächlich den linearen Verlauf von CSS3. Der spezifische Code lautet wie folgt:

/bootstrap.css file line 4539~line 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;
}

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

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

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

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

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

使用方法：

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

<br/>

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

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

运行效果如下：

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

6、进度条–层叠进度条

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

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

运行效果如下：

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

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

1）、实现方法：

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

20%

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

0%

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

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

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