数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在 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.cn/npm/[email protected]/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="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;"> </div>
步骤 5 - 在 progress 类 div 内创建另一个 div，并向该 div 添加类“.progress-bar”。使用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.cn/npm/[email protected]/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="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 2rem;">
步骤 5 - 现在在当前 progress 类 div 内，创建一个 div，它将包含带有动画的条纹进度，为此，请向父 progress div 的子 div 添加“progress-bar”、“progress-bar-striped”、“progress-bar-animated”类。
<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.cn/npm/[email protected]/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>
结论
正如我们上面看到的两个示例，一个包含基本进度条，另一个是动画进度条。因此，动画进度条使图形用户界面更具吸引力。通过使用动画进度条，我们可以显示不同颜色覆盖的不同进度百分比。总的来说，进度条在必要时在我们的网站中使用是一个好习惯。
776 次查看
