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

在本文中，我们将了解如何使用 Bootstrap 创建带有标签的堆叠进度条。 Bootstrap 5 是 Bootstrap 的最新主要版本，他们在其中改进了 UI 并进行了各种更改。进度条用于显示计算机上进程的进度。进度条显示该过程完成了多少，还剩下多少。我们可以使用预定义的引导类在网页上添加进度条。 Bootstrap 提供了多种类型的进度条，还支持多种自定义进度条，包括堆叠进度条和动画进度条。

通过使用引导进度条，用户可以快速识别为特定进程执行的任务的状态。例如，如果用户正在下载某些东西，进度条将显示完成状态或正在进行的下载的进度。类似的案例可以考虑上传等。

句法：

 Contents 

方法：创建进度条：

• 在 div 类中使用类进度。
• 在已经创建的 div 类中，添加另一个带有.progress-bar类的 div 标签。这里，bg-success 用于显示进度。
• 使用宽度作为百分比在样式属性下提及栏的进度。例如-style=”width:50%

示例 1：此示例说明了 Bootstrap 中的默认进度条。

HTML

  

  
    
    

  

    

        

            GeeksforGeeks
        
          
        
Progress Bar
          
        

            

            
        
    

  

输出：

现在，我们将按照以下步骤构建我们的堆叠进度条。

第一步：下载Bootstrap的最新版本或者我们可以直接将Bootstrap CDN链接加入到标签中。

第 2 步：在外部

中将类声明为具有.progress值的容器。

第 3 步：将.progress-bar类添加到内部

容器中。要指定进度条的宽度，我们可以使用 为将设置条形宽度的宽度预定义的引导类。例如， w-25 p-3将设置宽度为 25%， w-50 p-3将设置宽度为 50% 等等。

    

        Progress 1
    

    

        Progress 2
    

第 4 步：对于带标签的堆叠进度条，堆叠进度条内的文本将以百分比显示多任务完成情况。

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

HTML

  

    
    
    
    

  

    

        
GeeksforGeeks
        

            Labelled Stacked Progress Bar
        
        

          
        

            

                Progress 15%
            
            

                Progress 35%
            
            

                Progress 12%
            
            

                Progress 38%
            
        
    

  

输出：