suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie einen dynamischen Bootstrap-Fortschrittsbalken

So erstellen Sie einen dynamischen Bootstrap-Fortschrittsbalken

(*-*)浩
(*-*)浩Original
2019-07-11 13:52:064366Durchsuche

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

So erstellen Sie einen dynamischen Bootstrap-Fortschrittsbalken

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. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Animierter Fortschrittsbalken

Die Schritte zum Erstellen eines animierten Fortschrittsbalkens sind wie folgt:

Fügen Sie ein

mit den Klassen .progress und .progress-striped hinzu.

Fügen Sie außerdem die Klasse .active 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.

Dadurch erhalten die Streifen das Gefühl, sich von rechts nach links zu bewegen.

Schauen wir uns das folgende Beispiel an: 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 动画的进度条</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress progress-striped active">
	<div class="progress-bar progress-bar-success" role="progressbar"
		aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		style="width: 40%;">
		<span class="sr-only">40% 完成</span>
	</div>
</div>

</body>
</html>

Weitere technische Artikel zum Thema Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr zu erfahren!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen dynamischen Bootstrap-Fortschrittsbalken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：So verwenden Sie das Bootstrap-SchriftartsymbolNächster Artikel：So verwenden Sie das Bootstrap-Schriftartsymbol

In Verbindung stehende Artikel

Mehr sehen