在本教程中，我们将学习Bootstrap中的进度条。

进度条是向用户提供有关任何任务进度的可视信息的最佳方法，Bootstrap为我们提供了创建不同类型进度条的类。

基本进度条

要创建进度条，我们使用.progress类。

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

现在，让我们了解以上代码。

我们有一个父div包围进度条，因此我们给它指定了.progress类。

在父div内，我们有子div，它成为进度栏，因此它获得.progress-bar类。

我们希望进度条完成60％，因此我们通过编写内嵌CSS样式style =" width：60％"将width样式设置为60％。

我们还可以看到三个aria属性：aria-valuenow =" 60"，aria-valuemin =" 0"和aria-valuemax =" 100"。

ARIA代表可访问的富Internet应用程序。

" aria-"属性用于向屏幕阅读器之类的辅助技术提供有关各种元素的语义的其他信息。

因此，我们传达的信息是，当前值(aria-valuenow)为60，最小值(aria-valuemin)为0，最大值(aria-valuemax)为100。

接下来，我们有一个span标记，其中包含文本" 60％Complete"和" .sr-only"类。
这是用于屏幕阅读器的，不会显示在页面中。

带标签的进度条

我们还可以通过简单地在具有.progress-bar类的div中添加文本来添加指示进度的标签。

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

上下文进度条

我们可以通过添加以下类.progress-bar-success，.progress-bar-info，.progress-bar-warning和.progress-bar-danger来创建不同类型的进度条。
进度栏div。

<!-- progress bar default -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    40%
  </div>
</div>

<!-- progress bar success -->
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
    90%
  </div>
</div>

<!-- progress bar info -->
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    60%
  </div>
</div>

<!-- progress bar warning -->
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    30%
  </div>
</div>

<!-- progress bar danger -->
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    20%
  </div>
</div>

条纹进度条

我们甚至可以通过添加.progress-bar-striped类来创建条状进度条。

在IE9及以下版本中不可用。

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
    90%
  </div>
</div>

动画进度条

我们可以将.active类添加到.progress-bar-striped中，并创建动画进度条。

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
    90%
  </div>
</div>

堆叠进度条

我们可以将多个栏堆叠到一个进度栏中。
保持总百分比等于100％。

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 5%">
    <span class="sr-only">5% Complete (default)</span>
  </div>
  <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 10%">
    <span class="sr-only">10% Complete (default)</span>
  </div>
  <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 15%">
    <span class="sr-only">15% Complete (default)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (default)</span>
  </div>
  <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 25%">
    <span class="sr-only">25% Complete (default)</span>
  </div>
</div>