如何在 Bootstrap 中创建不同颜色的进度条？

Bootstrap 5 是 Bootstrap 的最新主要版本，他们在其中改进了 UI 并进行了各种更改。进度条是一种图形表示，它讲述了任何目标或任务的详细信息，即，它用于表示任务或任何操作的进度，显示完成了多少过程以及剩余多少。您可以使用预定义的引导类在网页上添加进度条。在本文中，我们将学习如何使用预定义的 Bootstrap 类创建具有不同颜色的进度条。

句法：

Contents

bootstrap 中的进度条可以用不同的颜色创建。在 bootstrap 中有两种方法可以改变进度条的颜色。

方法一：使用bg-type：

我们可以添加class bg-type in progress div来改变它的颜色。 bootstrap5 中有 8 种颜色自定义选项可用：

• bg-primary
• bg-中学
• bg-成功
• bg-危险
• bg-警告
• bg信息
• 背光灯
• bg-黑暗

示例：此示例说明了一些不同颜色的基本进度条。这些进度条通过其背景颜色（如成功、危险和中立）表示一种情绪。要以不同的颜色创建进度条的某些部分，只需在进度中添加一个带有类进度条的新 div。

HTML

 

    
    
    

 

    
        
GeeksforGeeks
        

        

            
10%
            
            
20%
            
            

                30%
            
            

                40%
            
        
    

 

输出：

方法二：使用 CSS 的background-color属性：

我们可以使用带有 background-color 属性的样式参数将进度条的颜色更改为任何所需的颜色。要以不同的颜色创建进度条的某些部分，只需在进度中添加一个带有类进度条的新 div。

示例：在这里，我们将借助其十六进制代码、名称或 RGB 值使用确定的颜色来更改进度条的颜色。

HTML

 

    
    
    

 

    
        
GeeksforGeeks
        

        

            

            
            

            
            

            
        
        

    

 

输出：