如何使用Bootstrap 5创建一个堆叠的进度条

在这篇文章中，我们将了解如何使用Bootstrap创建带有标签的堆叠式进度条。Bootstrap 5是Bootstrap最新发布的一个重要版本，在这个版本中他们对用户界面进行了改造，并做出了各种改变。进度条是用来显示计算机上一个进程的进度的。进度条显示进程完成了多少，还剩下多少。我们可以使用预定义的bootstrap类在网页上添加一个进度条。Bootstrap提供了许多类型的进度条，也支持一些自定义的进度条，包括堆叠式进度条和动画式进度条。

通过使用Bootstrap进度条，用户可以快速识别某个特定进程的任务执行状态。例如，如果用户正在下载东西，进度条将显示完成的状态或正在进行的下载的进度。类似的情况可以认为是上传和等。

语法:

<div class="progress"> Contents <div>

方法：要创建一个进度条。

在一个div类中使用progress类。
在已经制作好的div类中，添加另一个div标签，类别为.progress-bar 。这里，bg-success被用来显示进度。
在一个样式属性下提到条形图的进度，用宽度作为百分比。例如– style=”width:50%

例子1：这个例子说明了Bootstrap中默认的进度条。

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Load Bootstrap -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous" />
</head>
  
<body style="text-align: center">
    <div class="container mt-3" style="width: 700px">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <h4>Progress Bar</h4>
          
        <div class="progress">
            <div class="progress-bar bg-success" 
                style="width: 60%">
            </div>
        </div>
    </div>
</body>
  
</html>

输出:

如何使用Bootstrap 5创建一个堆叠的进度条？

现在，我们将按照以下步骤来建立我们的堆积进度条。

第1步：下载Bootstrap的最新版本，或者我们可以直接将Bootstrap CDN链接纳入<head>标签。

<!–Bootstrap CSS plugin–>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>

<!–Bootstrap JavaScript plugin–>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>

第2步：将该类声明为一个容器，其值为外部<div>中的.progress。

<div class="progress">
    <div></div>
    <div></div>
</div>

第3步：在内部的<div>容器中添加.progress-bar类。为了指定进度条的宽度，我们可以使用预定义的bootstrap类来设置进度条的宽度。例如，w-25 p-3将设置25%的宽度，w-50 p-3将设置50%的宽度，以此类推。

<div class="progress">
    <div class="progress-bar bg-success w-25 p-3">
        Progress 1
    </div>

    <div class="progress-bar bg-success w-50 p-3">
        Progress 2
    </div>
</div>

第4步：对于标记的堆积进度条，堆积进度条内的文本将显示多个任务完成的百分比。

示例2：本示例使用Bootstrap v5.0说明了标签式堆叠进度条。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Bootstrap 5 Labelled Stacked Progress Bar
    </title>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous" />
</head>
  
<body style="text-align: center">
    <div class="container mt-5">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3 class="text-secondary">
            Labelled Stacked Progress Bar
        </h3>
        <br />
          
        <div class="progress" style="height: 30px">
            <div class="progress-bar bg-primary w-25 p-3">
                Progress 15%
            </div>
            <div class="progress-bar bg-info w-50 p-3">
                Progress 35%
            </div>
            <div class="progress-bar bg-secondary w-25 p-3">
                Progress 12%
            </div>
            <div class="progress-bar bg-success w-50 p-3" role="">
                Progress 38%
            </div>
        </div>
    </div>
</body>
  
</html>