Bootstrap4 Basic Tutorial

Bootstrap4 Fortschrittsleiste

Die Fortschrittsleiste kann verwendet werden, um dem Benutzer den Fortschritt einer Aufgabe oder eines Vorgangs anzuzeigen. Der folgende Beispiel zeigt Ihnen, wie eine einfache Fortschrittsleiste mit einer vertikalen Verlaufsfarbe erstellt wird.

Die Fortschrittsleiste kann den Fortschritt der Benutzeraufgaben anzeigen.

Die Schritte zur Erstellung einer grundlegenden Fortschrittsleiste sind wie folgt:

Fügen Sie einen mit .progress behafteten <div> hinzu.
Fügen Sie dann im obigen <div> einen mit der Klasse .progress-bar eines leeren <div>.
Eine style-Attribut mit einem breiten Prozentsatz hinzufügen, z.B. style="width:70%" bedeutet, dass die Fortschrittsleiste 70% Position.

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Grundlegende Fortschrittsleiste</h2>
　　<p>Um eine Standard-Fortschrittsleiste zu erstellen, fügen Sie die Klasse .progress zum Container-Element hinzu und .progress zum Kind-Element.-bar-Klasse und die Fortschrittsleiste-Einstellungen: :</p>
　　<div class="progress">
　　　　<div class="progress-bar" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Test it out ‹/›

进度条高度

进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>进度条高度</h2>
　　<p>进度条高度默认为　16px。我们可以使用 CSS 的 height 属性来修改他：</p>　
　　<div class="progress" style="height:10px;">
　　　　<div class="progress-bar" style="width:40%;"></div>
　　</div>
　　<br>
　　<div class="progress" style="height:20px;">
　　　　<div class="progress-bar" style="width:50%;"></div>
　　</div>
　　<br>
　　<div class="progress" style="height:30px;">
　　　　<div class="progress-bar" style="width:60%;"></div>
　　</div>
</div>
</body>
</html>

Test it out ‹/›

进度条标签

可以在进度条内添加文本，如进度的百分比：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>进度条文本标签</h2>
　　<div class="progress">
　　　　<div class="progress-bar" style="width:70%">70%</div>
　　</div>
</div>
</body>
</html>

Test it out ‹/›

不同颜色的进度条

默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>多种颜色的进度条</h2>
　　<p>Bootstrap4　提供了以下几种进度条颜色:</p>　
　　<div class="progress">
　　　　<div class="progress-bar" style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-info" style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-warning" style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Test it out ‹/›

条纹的进度条

可以使用 .progress-bar-striped 类来设置条纹进度条：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>条纹的进度条</h2>
　　<p>可以使用 .progress-bar-striped 类来设置条纹进度条：</p>　
　　<div class="progress">
　　　　<div class="progress-bar progress-bar-striped" style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Test it out ‹/›

动画进度条

使用 .progress-bar-animated 类可以为进度条添加动画：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>动画进度条</h2>
　　<p>使用 .progress-bar-animated 类可以为进度条添加动画：</p>　
　　<div class="progress">
　　　　<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
　　</div>
</div>
</body>
</html>

Test it out ‹/›

混合色彩进度条

进度条可以设置多种颜色：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Mixed Color Progress Bar</h2>
　　<p>Progress bars can be set to multiple colors:</p>　
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%">
　　　　　　Free Space
　　　　</div>
　　　　<div class="progress-bar bg-warning" style="width:10%">
　　　　　　Warning
　　　　</div>
　　　　<div class="progress-bar bg-danger" style="width:20%">
　　　　　　Danger
　　　　</div>
　　</div>
</div>
</body>
</html>

Test it out ‹/›

Bootstrap4 Pagination Bootstrap4 Badge