如何使用 bootstrap 创建进度条？

Bootstrap 是一个开源框架，用于设计易于使用且高效的响应式网站。它有现成的模板，可用于在有限的时间内设计网页。

什么是进度条？

每当需要可视界面来显示特定任务的进度时，都会使用进度条。比方说，“文件下载了多少百分比，或者有多少学生通过了考试”。

为此，Bootstrap 有一个可以在网页上使用的进度条组件。 bootstrap 的所有版本都支持进度条组件。

如何使用引导程序添加进度条？

1. 在此处访问 Bootstrap 的官方页面。在右侧，可以根据需要选择合适的引导版本。但建议使用最新版本，因为它嵌入了新功能。
2. 在左侧面板下的组件部分，可以看到进度选项卡。在进度选项卡下可以看到进度条组件。
3. 现在可以直接使用现有的模板。这可以通过将模板放在 html 页面的正文部分下来完成。

示例 1：可以使用 bootstrap 文档选项卡中的 starter 模板。

输出：在网页上可以看到以下进度条。

例2：我们可以通过写在进度条的div之间来显示进度条的百分比。

句法：

  
25%

代码：

HTML

 

    
    
 
    
    

 

    Bootstrap Progress Bar
    
        25%
      

 

输出：

注意：可以根据要求在代码中更改进度值。

外貌

我们可以使用引导后台实用程序类更改进度条的外观，例如“bg-info” 、 “bg-success” 、 “bg-warning”等等。

句法：

这是一个代码示例，其中我们使用不同的背景实用程序类制作了不同颜色的进度条。

代码：

HTML

 

    
    
 
    
    

 

    Bootstrap Progress Bar
    
        
        
    
    
    
        
    
    
        
    
    
        
    
    
        
    
 

 

输出：

不同外观的引导进度条

剥离的进度条

我们可以使用“progress-bar-stripped”类以及组件中的“progress-bar”类来制作剥离的进度条。

句法：

代码：

HTML

 

    
    
 
    
    

 

    Bootstrap Stripped Progress Bar
 
    
        
      
      
        
      
      
        
      
      
        
      
      
        
      
 

 

输出：

Bootstrap 剥离进度条

动画进度条

我们可以使用“progress-bar-animated”类以及组件中的“progress-bar”类来制作动画进度条。

句法：

代码：

HTML

 

    
    
 
    
    

 

    Bootstrap Animated Progress Bar
    
        
      
 

 

输出：

Bootstrap 动画进度条

支持的浏览器：

• 谷歌浏览器
• 歌剧
• 苹果浏览器
• 火狐浏览器
• 勇敢的浏览器