如何在 Bootstrap 中创建不同颜色的进度条
概述
Bootstrap 提供了一些美观的方式来构建网站组件。Bootstrap 通过在标签中使用这些类来提供特定的类。无需添加外部样式表，就可以完美地构建整个组件，但如果我们想对组件进行一些更改，则可以为其添加样式表。
要借助 Bootstrap 创建一个简单的进度条，我们将使用以下 Bootstrap 类:-
progress
progress-bar
如果我们想创建一个带有动画条纹的进度条，Bootstrap 有一个提供动画效果的类:-
progress-bar-striped
progress-bar-animated
Bootstrap CDN 链接
在开始构建进度条之前，首先将 Bootstrap CDN 链接添加到页面的 head 标签中。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp"crosso rigin="anonymous">
算法
步骤 1 - 在文本编辑器中创建 HTML 样板代码。
步骤 2 - 将上面提供的 Bootstrap CDN 链接添加到 head 标签中的代码中。
步骤 3 - 创建一个包含页面进度条的父 div 容器。
步骤 4 - 现在创建一个 div 容器来构建进度条，并为其添加".progress"类。同时添加一些属性，例如:role、aria-valuemin、aria-valuemax，其值分别为 progressbar、0 和 100。
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="成功示例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;"> </div>
步骤 5 - 在进度类 div 内创建另一个 div，并将类".progress-bar"添加到该 div。根据我们的选择，使用 bg-dark、bg-warning、bg-success、bg-danger 设置进度颜色。
<div class="progress-bar bg-success" style="width: 25%">25%</div>
步骤 6 - 进度条创建成功。
示例
在给定的示例中，我们将使用 Bootstrap 预定义类构建一个简单的基本进度条。进度条将通过进度条上的百分比数字指示进度。
<html>
<head>
<title>Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column mx-auto justify-content-center" style="width: 80vw;height: 100vh;">
<h3 class="text-success fw-bold text-center bg-light rounded py-4 px-1">
Percentage progress bar
</h3>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-success" style="width: 25%">25%</div>
</div>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-warning" style="width: 75%">75%</div>
</div>
<div class="progress w-100 my-2 fw-bold rounded-pill" role="progressbar" aria-label="Danger example"aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>
</div>
</body>
</html>
算法
步骤 1- 在文本编辑器中创建 HTML 样板代码。
步骤 2- 将上面提供的 Bootstrap CDN 链接添加到 head 标签中的代码中。
步骤 3- 创建一个包含页面进度条的父 div 容器。
步骤 4- 创建一个类名为".progress"的 div 容器，并向 div 标签添加属性，例如:role、aria-valuemin、aria-valuemax，其值分别为 progressbar、0 和 100。
<div class="progress rounded-pill my-2" role="progressbar" aria-label="默认条纹示例" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
步骤 5− 现在在当前进度类 div 中，创建一个包含带有动画的条纹进度的 div，为此，请将"progress-bar"、"progress-bar-striped"、"progress-bar-animated"类添加到父进度 div 的子 div 中。
<div class="progress-bar progress-bar-striped bg-info progress-bar-animated" style="width: 50%"></div>
步骤 6 − 动画进度条已成功创建。
示例
在此示例中，我们将构建一个带有动画的升级版进度条。进度条中的动画可以通过页面顶部提到的 Bootstrap 预定义类实现。
<html>
<head>
<title>Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="pcontainer d-flex flex-column mx-auto justify-content-center" style="width: 80vw;height: 100vh;">
<h3 class="text-success fw-bold text-center bg-light rounded py-4 px-1">Striped animated progress bar</h3>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 10%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" style="width: 25%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-info progress-bar-animated" style="width: 50%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" style="width: 75%"></div>
</div>
<div class="progress rounded-pill my-2" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" style="width: 100%"></div>
</div>
</div>
</body>
</html>
结论
正如我们上面看到的两个示例，一个包含基本进度条，另一个包含动画进度条。因此，动画进度条使图形用户界面更具吸引力。通过使用动画进度条，我们可以用不同的颜色显示不同的进度百分比。总的来说，在我们的网站中，必要时使用进度条是一种很好的做法。
