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

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>

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

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

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>

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

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

.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

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

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

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

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>

提示标签

　　在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，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>

　　在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 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>

 

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Mehr anzeigen

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7678

15

CakePHP-Tutorial

1393

52

C#-Tutorial

1207

24

Wie lautet das Format des Kontonamens von Steam?

91

11

Win11 -Aktivierungsschlüssel dauerhaft

73

19

Mehr anzeigen

Related knowledge

So erhalten Sie die Bootstrap -Suchleiste Apr 07, 2025 pm 03:33 PM

So verwenden Sie Bootstrap, um den Wert der Suchleiste zu erhalten: Bestimmt die ID oder den Namen der Suchleiste. Verwenden Sie JavaScript, um DOM -Elemente zu erhalten. Holen Sie sich den Wert des Elements. Führen Sie die erforderlichen Maßnahmen aus.

So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

Wie man vertikale Zentrierung von Bootstrap macht Apr 07, 2025 pm 03:21 PM

Verwenden Sie Bootstrap, um die vertikale Zentrierung zu implementieren: FlexBox-Methode: Verwenden Sie den D-Flex, den Justify-Content-Center und die Ausrichtungsklassen aus Align-Item-Center, um Elemente in den Flexbox-Behälter zu platzieren. Methode für Ausstellungs-Iitem-Center-Klassen: Bei Browsern, die Flexbox nicht unterstützen, verwenden Sie die Klasse aus Align-items-Center-Klasse, vorausgesetzt, das übergeordnete Element hat eine definierte Höhe.

So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

See all articles