进度条（Progress Bars）

优质

小牛编辑

128浏览

2023-12-01

本章讨论Bootstrap进度条。进度条的目的是显示资产正在加载，正在进行中，或者是否正在对页面上的元素进行操作。

进度条使用CSS3过渡和动画来实现它们的一些效果。 Internet Explorer 9及更低版本或旧版本的Firefox不支持这些功能。 Opera 12不支持动画。

默认进度条

创建基本进度条 -

添加一个带有.progress类的<div>。
接下来，在上面的div中，添加一个带有.progress-bar类的空<div>。
添加样式属性，其宽度表示为百分比。比如说，style =“60％”; 表示进度条为60％。

我们来看下面的例子 -

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

替代进度条

要创建具有不同样式的进度条 -

添加一个带有.progress类的<div>。
接下来，在上面的div中，添加一个空的div和一个类.progress-bar和class progress-bar-*其中*可以是success, info, warning, danger 。
添加样式属性，其宽度表示为百分比。比如说，style =“60％”; 表示进度条为60％。

我们来看下面的例子 -

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>
<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>
<div class = "progress">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>
<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

条纹进度条

创建条带进度条 -

添加一个带有.progress和.progress-striped类的<div>。
接下来，在上面的div中，添加一个空的div和一个类.progress-bar和class progress-bar-*其中*可以是success, info, warning, danger 。
添加样式属性，其宽度表示为百分比。比如说，style =“60％”; 表示进度条为60％。

我们来看下面的例子 -

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>
<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>
<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>
<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

动画进度条

要创建动画进度条 -

添加一个带有.progress和.progress-striped类的<div>。还要将.active添加到.progress-striped 。
接下来，在上面的div中，添加一个带有.progress-bar类的空<div>。
添加样式属性，其宽度表示为百分比。比如说，style =“60％”; 表示进度条为60％。

这将从右到左为条纹设置动画。

我们来看下面的例子 -

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

堆叠进度条

您甚至可以堆叠多个进度条。将多个进度条放在同一个.progress以堆叠它们，如下例所示 -

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      <span class = "sr-only">40% Complete</span>
   </div>
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>