Beispiele für verschiedene Fortschrittsbalken in Bootstrap-HTML-Tutorial-php.cn

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

hinzu.

Fügen Sie als Nächstes im obigen

ein leeres

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

<div class="progress">   <div class="progress-bar" style="width:40%"></div></div>

Nach dem Login kopieren

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

<div class="progress"><div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete</span></div></div>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

<div class="progress"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Dynamische Streifen

<div class="progress progress-striped"><div class="progress-bar" style="width:70%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Kaskadierender Fortschrittsbalken

<div class="progress progress-striped active"><div class="progress-bar" style="width:70%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

Nach dem Login kopieren

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"><span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span>
  </div></div>

Nach dem Login kopieren

提示标签

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

<div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div></div>

Nach dem Login kopieren

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

<div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:1%">1%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">1%</div></div>

Nach dem Login kopieren

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!

Verwandte Etiketten：

bootstrap Zeitplan

Quelle：php.cn

Vorheriger Artikel：Beispiel-Tutorial zum Landingpage-Design Nächster Artikel：Eine ausführliche Einführung in Bootstrap-Miniaturansichten

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors