Bootstrap4 进度条

Bootstrap4 中的 进度条（Progress Bars） 是一个非常有用的工具，它显示了一个任务、项目或其他过程的完成百分比或进度。Bootstrap4 进度条支持许多可定制的选项，例如颜色、高度、条纹、动画等等。本文将详细介绍如何使用 Bootstrap4 进度条来创建应用程序的进度展示。

创建一个基本的进度条

要创建一个基本的进度条，您可以使用以下 HTML 代码：

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

上面这段代码创建了一个最基本的进度条，使用了 Bootstrap4 的 progress 类和 progress-bar 类。 role 属性设置为 progressbar，用以提供对辅助技术的适当的语义信息。 style 属性用于设置进度条的宽度，这里设置宽度为50%。 aria-valuemin 属性用于指定进度条的最小值（在这里为0）， aria-valuemax 属性用于指定进度条的最大值（在这里为100），而 aria-valuenow 属性则用于指定此时进度条的值（在这里为50）。

您可以在这个基本的 HTML 代码中使用任何 CSS 样式，以定制您的进度条。

新增条纹或斑马线

要向进度条添加条纹或斑马纹，只需在 progress-bar 类下追加 progress-bar-striped 类即可。

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

新增动画效果

如果要向进度条添加动画效果，只需在 progress-bar 类下追加 progress-bar-animated 类即可。

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

自定义颜色

默认情况下，进度条的颜色是蓝色的。要自定义颜色，请使用下面的 HTML 代码：

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

在上面的代码中， bg-danger 类将进度条的颜色设置为红色。如果需要其他颜色，则可以使用 Bootstrap4 中提供的其他颜色类名。

高度

如需更改进度条的高度，请使用 progress-bar 类中的 h-5 类或 h-10 类，它们分别将进度条的高度设置为 5px 或 10px。

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

总结

Bootstrap4 进度条是一个非常实用的工具，帮助您显示任务完成的程度。使用 Bootstrap4 提供的各种选项，可以轻松地自定义进度条的外观和行为。在创建进度条时，务必要指定 role、aria-valuemin、aria-valuemax 和 aria-valuenow 属性，以确保您的进度条对辅助技术友好。