Beispiele für verschiedene Fortschrittsbalken in Bootstrap

In diesem Kapitel wird der Bootstrap-Fortschrittsbalken erläutert. In diesem Tutorial erfahren Sie, wie Sie mit Bootstrap einen Fortschrittsbalken für Lade-, Umleitungs- oder Aktionszustände erstellen.

Bootstrap-Fortschrittsbalken verwenden CSS3-Übergänge und -Animationen, um diesen Effekt zu erzielen. Internet Explorer 9 und frühere und ältere Versionen von Firefox unterstützen diese Funktion nicht und Opera 12 unterstützt keine Animationen.

Standard-Fortschrittsbalken

Die Schritte zum Erstellen eines einfachen Fortschrittsbalkens sind wie folgt:

Fügen Sie ein dc6dce4a544fdca2df29d5ac0ea9906b hinzu.

Fügen Sie als Nächstes im obigen dc6dce4a544fdca2df29d5ac0ea9906b ein leeres dc6dce4a544fdca2df29d5ac0ea9906b mit der Klasse .progress-bar hinzu.

Fügen Sie ein Stilattribut mit einer in Prozent ausgedrückten Breite hinzu, z. B. style="60 %" bedeutet, dass sich der Fortschrittsbalken bei 60 % befindet.

Sehen wir uns das folgende Beispiel an:

Beispiel

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

Basic-Stil

Das Bootstrap-Framework bietet einen Fortschrittsbalken Basic Stil, eine Hintergrundfarbe mit 100 % Breite und dann eine Hervorhebungsfarbe, um den Fertigstellungsfortschritt anzuzeigen. Tatsächlich ist es sehr einfach, einen solchen Fortschrittsbalken zu erstellen. Der äußere Container hat eine bestimmte Breite und das untergeordnete Element legt eine Breite fest % (das heißt das Breitenverhältnis des übergeordneten Containers) und legen Sie eine Hervorhebungshintergrundfarbe dafür fest.

Das Bootstrap-Framework wird auch auf diese Weise implementiert. Es stellt zwei Container bereit „progress“-Stil, und der Untercontainer verwendet den „progress-bar“-Stil. Unter anderem wird progress verwendet, um den Containerstil des Fortschrittsbalkens festzulegen, während progress-bar verwendet wird, um den Fortschritt des Fortschrittsbalkens zu begrenzen

.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

Barrierefreiheitsaktualisierungen Eine gute Möglichkeit, es zu schreiben, ist wie folgt:

b8201876fc96a5058af18d6629bf1b0e9d99875cf552fcccb61087048cf5934b64952123ee1a1d9b385bc3bca58612f040% Complete54bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

Das Rollenattribut teilt der Suchmaschine mit, dass dieses Div als Fortschrittsbalken fungiert Das Attribut „40“ gibt an, dass der aktuelle Fortschrittsbalken 40 % beträgt. Das Attribut aria-valuemin = „0“ gibt an, dass der Mindestwert des Fortschrittsbalkens 0 % ist der Fortschrittsbalken soll 100 % sein

Farbiger Fortschrittsbalken

Der Fortschrittsbalken im Bootstrap-Framework ist derselbe wie die Warnung Um dem Benutzer ein besseres Erlebnis zu bieten, werden je nach Status unterschiedliche Farben des Fortschrittsbalkens konfiguriert. Es wird hier als farbiger Fortschrittsbalken bezeichnet, der hauptsächlich die folgenden vier Typen umfasst:

　☑ progress-bar-info: Zeigt den Informationsfortschrittsbalken an, die Farbe des Fortschrittsbalkens ist blau

☑ Fortschrittsbalken-Erfolg: Zeigt einen erfolgreichen Fortschrittsbalken an, die Farbe des Fortschrittsbalkens ist grün

　☑ Fortschrittsbalken-Warnung: Zeigt einen warnenden Fortschrittsbalken an, die Farbe des Fortschrittsbalkens ist gelb

　☑ Fortschrittsbalken-Gefahr: Zeigt einen Fehler an. Fortschrittsbalken, die Farbe des Fortschrittsbalkens ist rot

Die spezifische Verwendung ist sehr einfach. Sie müssen nur den entsprechenden Klassennamen zur Basis hinzufügen Fortschritt. Im Vergleich zum einfachen Fortschrittsbalken ist die Farbe des Fortschrittsbalkens die Farbe des Fortschrittsbalkens

Zusätzlich zur Bereitstellung eines farbigen Fortschrittsbalkens im Bootstrap-Framework bietet es einen gestreiften Fortschrittsbalken, der mithilfe eines linearen CSS3-Verlaufs ohne Verwendung von Bildern 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 die Fortschrittsbalkenstreifen einen Farbeffekt haben Wie beim farbigen Fortschritt müssen Sie nur den Klassennamen „progress-striped“ zum Fortschrittsbalken hinzufügen. Fügen Sie den entsprechenden Farbklassennamen zum Balken hinzu.

.progress-bar-success {
  background-color: #5cb85c;
}.progress-bar-info {
  background-color: #5bc0de;
}.progress-bar-warning {
  background-color: #f0ad4e;
}.progress-bar-danger {
  background-color: #d9534f;
}

[Hinweis] Sie können einen Streifeneffekt für den Fortschrittsbalken erstellen durch Farbverläufe. IE9-Browser unterstützt nicht

b8201876fc96a5058af18d6629bf1b0e014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0ee8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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

Dynamische Streifen

3a8b4b7f756725c3a8015596652629dcd3a8cd28dd0113c1803d2db27c9892d916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dce8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

Um den gestreiften Fortschrittsbalken zu bewegen, stellt das Bootstrap-Framework auch einen dynamischen gestreiften Fortschrittsbalken bereit. Das Implementierungsprinzip wird hauptsächlich durch die Animation von CSS3 erreicht. Zunächst wird über @keyframes eine Fortschrittsbalken-Streifenanimation erstellt. Diese Animation dient hauptsächlich dazu, die Position des Hintergrundbilds zu ändern, nämlich den Wert von Hintergrundposition. Da der gestreifte Fortschrittsbalken durch den linearen Farbverlauf von CSS3 erstellt wird und der lineare Farbverlauf das Hintergrundbild im entsprechenden Hintergrund implementiert

[Hinweis] IE9-Browser unterstützt

nicht

Fügen Sie im Bootstrap-Framework einen Klassennamen „active“ zum Fortschrittsbalkencontainer „progress“ hinzu und lassen Sie die Animation „progress-bar-stripes“ beim Laden des Dokuments wirksam werden, damit es angezeigt wird Animationseffekt der Bewegung von rechts nach links

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

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

Kaskadierender Fortschrittsbalken

da7fee9992280785cbb141b7b5e9ce54d3a8cd28dd0113c1803d2db27c9892d916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54e8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

Zusätzlich zu den oben genannten Fortschrittsbalken bietet das Bootstrap-Framework auch einen kaskadierenden Fortschrittsbalken. Durch kaskadierende Fortschrittsbalken können Fortschrittsbalken in unterschiedlichen Zuständen zusammengelegt und horizontal angeordnet werden.

Platzieren Sie mehrere Fortschrittsbalken in demselben

, damit sie gestapelt erscheinen

.progress [Hinweis] Die Summe der gestapelten Fortschrittsbalken darf nicht größer als 100 % sein

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

 

提示标签

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

b8201876fc96a5058af18d6629bf1b0e2280bf5905e2e71bbdea92945e22be8a20%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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

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

 

Das obige ist der detaillierte Inhalt vonBeispiele für verschiedene Fortschrittsbalken in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!