Bootstrap4 教程基础知识

Bootstrap4 Barre de progression

La barre de progression peut être utilisée pour afficher la progression d'une tâche ou d'une opération à l'utilisateur. L'exemple suivant vous montrera comment créer une barre de progression simple avec une dégradé vertical.

La barre de progression peut afficher le processus de completion de la tâche de l'utilisateur.

Les étapes pour créer une barre de progression de base sont les suivantes :

Ajouter une propriété .progress de classe <div>.
Ensuite, dans le <div> ci-dessus, ajoutez un <div> avec la classe .progress-bar Un <div> vide.
Ajouter une propriété "style" avec une largeur en pourcentage, par exemple style="width:70%" signifie que la barre de progression est 70% de 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>Barre de progression de base</h2>
　　<p>Pour créer une barre de progression par défaut, ajoutez la classe "progress" à l'élément conteneur, et "progress" à l'élément enfant-Ajouter la classe "bar" et définir le statut de progression de la barre de progression : </p>
　　<div　class="progress">
　　　　<div　class="progress-bar" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Hauteur de la barre de progression

进度条高度默认为 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>

测试看看 ‹/›

进度条标签

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

示例

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

测试看看 ‹/›

不同颜色的进度条

默认情况下进度条为蓝色，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>

测试看看 ‹/›

条纹的进度条

可以使用 .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>

测试看看 ‹/›

动画进度条

使用 .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>

测试看看 ‹/›

混合色彩进度条

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

示例

<!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>进度条可以设置多种颜色:</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>

测试看看 ‹/›

Bootstrap4 分页 Bootstrap4 徽章