📌  相关文章
📜  Bootstrap进度栏

📅  最后修改于: 2020-12-19 02:49:39             🧑  作者: Mango

引导进度条

进度条显示用户在流程中的距离。在Bootstrap中，有几种类型的进度条。

元素中的类.progress用于在引导程序中创建默认进度栏。

Bootstrap进度栏示例




  Bootstrap Progress bar
  
  
  
  





  
Default Progress Bar

  

    

      70% Complete

Bootstrap 4基本进度栏

进度条用于向用户显示他/她在过程中待了多长时间。要创建创建默认的进度条，请将.progress类添加到容器元素，并将进度条类添加到其子元素。使用CSS width属性设置进度条的宽度。

例




  Bootstrap Example
  
  
  
  
  
  





  
Progress Bar With Label

  

    
70%

具有标签的Bootstrap进度栏

带标签的进度条指定特定过程的进度百分比。

您必须从进度栏中删除仅.sr类，才能显示可见百分比。

请参阅以下示例：




  Bootstrap Example
  
  
  






  
Progress Bar With Label

  

    

      76%

Bootstrap彩色进度栏

您可以使用上下文类来创建彩色进度条。

用于创建彩色进度条的上下文类：

  • .progress-bar-成功
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
 


  Bootstrap Example
  
  
  
  





  
Colored Progress Bars

  
The contextual classes colors the progress bars:
 
  

    

      40% Complete (success)
    

  

  

    

      50% Complete (info)
    

  

  

    

      60% Complete (warning)
    

  

  

    

      70% Complete (danger)

引导程序剥离进度条

您可以使用类.progress-bar-striped创建剥离的进度条。

 


  Bootstrap Example
  
  
  
  





  
Striped Progress Bars

  
The .progress-bar-striped class adds stripes to the progress bars:
 
  

    

      40% Complete (success)
    

  

  

    

      50% Complete (info)
    

  

  

    

      60% Complete (warning)
    

  

  

    

      70% Complete (danger)

Bootstrap动画进度条

您必须使用.active类来创建动画进度条。




  Bootstrap Example
  
  
  
  





  
Animated Progress Bar

  
The .active class animates the progress bar:
 
  

    

      70%

Bootstrap Stacked进度栏(彩色进度栏)

您可以通过将多个条放置在同一

中来创建堆叠的进度条

  


  Bootstrap Example
  
  
  
  





  
Stacked Progress Bars

  
Create a stacked progress bar by placing multiple bars into the same div with class .progress:
 
  

    

      Free Space
    

    

      Warning
    

    

      Danger

注意：Bootstrap 4中添加了两种新的彩色进度条：

  • .progress-bar-white
  • .progress-bar-secondary
  • .progress-bar-light
  • .progress-bar-dark

例：




  Bootstrap Example
  
  
  
  
  
  





  
Colored Progress Bars Example