Bootstrap Grundlagen-Tutorial

Bootstrap Plugins

Bootstrap-Medienobjekt Bootstrap-Warnung

Bootstrap-Fortschrittsbalken

Dieses Kapitel wird die Bootstrap Fortschrittsbalken erläutern. In diesem Tutorial sehen Sie, wie man mit Bootstrap Fortschrittsbalken für Lade-, Umleitungs- oder Aktionszustände erstellt.

Bootstrap Fortschrittsbalken verwenden CSS3 Übergänge und Animationen, um dieses Effekt zu erzielen. Internet Explorer 9 und älteren Versionen sowie alten Firefox-Versionen wird diese Funktion nicht unterstützt, Opera 12 Animiert nicht.

Standard-Fortschrittsbalken

Schritte zur Erstellung eines grundlegenden Fortschrittsbalkens:

Fügen Sie eine Klasse hinzu .progress hinzufügen.
Fügen Sie dann im obigen <div> ein Element mit der Klasse .progress-bar eines leeren <div>-Elements.
Fügen Sie eine Breite mit Prozentsymbol darstellenden style-Attribut hinzu, z.B. style="width: 60%"; bedeutet, dass der Fortschrittsbalken 60% Position.

Lassen Sie uns das folgende Beispiel betrachten:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Fortschrittsbalken</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">
	<div class="progress"-bar" role="progressbar" aria-valuenow="60"
		　aria-valuemin="0"　aria-valuemax="100" style="width:　40%;">
		<span　class="sr-nur">40% abgeschlossen </span>
	</div>
</div>
</body>
</html>

Testen Sie heraus ‹/›

Ergebnis wie folgt gezeigt:

Alternierender Fortschrittsbalken

Schritte zur Erstellung von Fortschrittsbalken mit verschiedenen Stilen:

Fügen Sie eine Klasse hinzu .progress hinzufügen.
Fügen Sie dann im obigen <div> ein Element mit der Klasse .progress-bar und die Klasse progress-bar-* eines leeren <div>-Elements. Dort ist* kann sein success, info, warning, danger.
Fügen Sie eine style-Attribut mit einem Breitenprozentsatz hinzu, z.B. style="60%"; bedeutet, dass der Fortschrittsbalken 60% Position.

Lassen Sie uns das folgende Beispiel betrachten:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Alternierender Fortschrittsbalken</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">
	<div class="progress"-bar progress-bar-success" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　90%;">
		<span　class="sr-nur">90% abgeschlossen (Erfolg) </span>
	</div>
</div>
<div class="progress">
	<div class="progress"-bar progress-bar-info" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　30%;">
		<span　class="sr-nur">30% abgeschlossen (Information) </span>
	</div>
</div>
<div class="progress">
	<div class="progress"-bar progress-bar-warning" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　20%;">
		<span　class="sr-nur">20%　Fertigstellung (Warnung) </span>
	</div>
</div>
<div class="progress">
	<div class="progress"-bar progress-bar-danger" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　10%;">
		<span　class="sr-nur">10% abgeschlossen (Gefahr) </span>
	</div>
</div>
</body>
</html>

Testen Sie heraus ‹/›

Ergebnis wie folgt gezeigt:

streifige Fortschrittsbalken

Schritte zur Erstellung eines streifigen Fortschrittsbalkens sind wie folgt:

Fügen Sie eine Klasse hinzu .progress und .progress-striped hinzufügen.
Fügen Sie dann im obigen <div> ein Element mit der Klasse .progress-bar und die Klasse progress-bar-* eines leeren <div>-Elements. Dort ist* kann sein success, info, warning, danger.
Fügen Sie eine style-Attribut mit einem Breitenprozentsatz hinzu, z.B. style="60%"; bedeutet, dass der Fortschrittsbalken 60% Position.

Lassen Sie uns das folgende Beispiel betrachten:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Bootstrap Beispiel　-　streifige Fortschrittsbalken</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">
　　　　<div class="progress"-bar progress-bar-success" role="progressbar"
　　　　　　　　　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
　　　　　　　　　style="width:　90%;">
　　　　　　　　<span　class="sr-nur">90% abgeschlossen (Erfolg) </span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-info" role="progressbar"
　　　　　　　　　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
　　　　　　　　　style="width:　30%;">
　　　　　　　　<span　class="sr-nur">30% abgeschlossen (Information) </span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-warning" role="progressbar"
　　　　　　　　　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
　　　　　　　　　style="width:　20%;">
　　　　　　　　<span　class="sr-nur">20%　Fertigstellung (Warnung) </span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-danger" role="progressbar"
　　　　　　　　　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
　　　　　　　　　style="width:　10%;">
　　　　　　　　<span　class="sr-nur">10% abgeschlossen (Gefahr) </span>
　　　　</div>
</div>
</body>
</html>

Testen Sie heraus ‹/›

Ergebnis wie folgt gezeigt:

animierte Fortschrittsbalken

Schritte zur Erstellung eines animierten Fortschrittsbalkens sind wie folgt:

Fügen Sie eine Klasse hinzu .progress und .progress-striped hinzufügen. Fügen Sie gleichzeitig die Klasse .active.
Fügen Sie dann im obigen <div> ein Element mit der Klasse .progress-bar eines leeren <div>-Elements.
Fügen Sie eine style-Attribut mit einem Breitenprozentsatz hinzu, z.B. style="60%"; bedeutet, dass der Fortschrittsbalken 60% Position.

Das wird die Streifen so bewegen, dass sie von rechts nach links gehen.

Lassen Sie uns das folgende Beispiel betrachten:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　animierte Fortschrittsbalken</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-nur">40% abgeschlossen </span>
	</div>
</div>
</body>
</html>

Testen Sie heraus ‹/›

Ergebnis wie folgt gezeigt:

stapelbare Fortschrittsbalken

Sie können sogar mehrere Fortschrittsbalken stapeln. Legen Sie mehrere Fortschrittsbalken in den gleichen .progress In diesem Beispiel können Sie Stapelungen implementieren, wie im folgenden Beispiel gezeigt wird:

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　stapelbare Fortschrittsbalken</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">
	<div class="progress"-bar progress-bar-success" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　40%;">
		<span　class="sr-nur">40% abgeschlossen </span>
	</div>
	<div class="progress"-bar progress-bar-info" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　30%;">
		<span　class="sr-nur">30% abgeschlossen (Information) </span>
	</div>
	<div class="progress"-bar progress-bar-warning" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　20%;">
		<span　class="sr-nur">20%　Fertigstellung (Warnung) </span>
	</div>
</div>
</body>
</html>

Testen Sie heraus ‹/›

Ergebnis wie folgt gezeigt:

Bootstrap-Medienobjekt Bootstrap-Warnung