Bootstrap5中的Progress（进度条）组件

Bootstrap 5 提供了一套用于显示任务进度的 HTML 和 CSS 样式。这些样式可以轻松地通过添加几个简单的类来实现。在 Bootstrap 5 中，进度条是通过 .progress 类来定义的容器，而进度本身则通过 .progress-bar 类来定义。

基本示例

以下是一个简单的 Bootstrap 5 进度条的示例：

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

在这个例子中，.progress 类定义了进度条的容器，而 .progress-bar 类定义了进度条本身。role="progressbar" 属性告诉辅助技术（如屏幕阅读器）这是一个进度条元素。style="width: 25%;" 设置了进度条的宽度，表示任务完成了 25%。aria-valuenow、aria-valuemin 和 aria-valuemax 属性用于提供进度条的当前值、最小值和最大值，以便辅助技术可以正确地报告进度。

宽度

对于进度条的宽度，可使用 w-* 工具类，其中 * 可以是 25、50、75、100 等数字，来代表不同的宽度百分比。

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-75"></div>
</div>

在上面的示例中，.progress-bar 使用了 w-75 工具类，将进度条的宽度设置为 75%。

高度

对于进度条的高度，只需要在 .progress 容器上设置高度值即可。因为 .progress-bar 是 .progress 容器的子元素，所以当您改变 .progress 的高度时，内部的 .progress-bar 会自动相应地调整大小。

<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
  <div class="progress-bar" style="width: 25%;"></div>
</div>

<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px;">
  <div class="progress-bar" style="width: 25%;"></div>
</div>

在上面的示例中，我们分别设置了 .progress 容器的高度为 1 像素和 20 像素。由于 .progress-bar 是 .progress 的子元素，所以它的高度会跟随父容器的高度自动调整。

进度条标签

可以在 .progress-bar 内部放置文本，从而为进度条添加标签。

<div class="progress" role="progressbar" aria-label="带有标签的示例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">  
  <div class="progress-bar" style="width: 25%">25%</div>  
</div>

背景色

使用背景实用工具类可以改变单个进度条的外观。

<div class="progress" role="progressbar" aria-label="成功示例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="信息示例" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="警告示例" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="危险示例" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

在这个示例中，我们使用了 .bg-success、.bg-info、.bg-warning 和 .bg-danger 这些背景实用工具类，它们分别代表成功、信息、警告和危险四种状态，为进度条添加了不同的背景色。

如果你为带有自定义背景色的进度条添加了标签，请确保也设置了适当的文本颜色，以确保标签的可读性和对比度。

<div class="progress" role="progressbar" aria-label="成功示例" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="信息示例" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-label="警告示例" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" aria-label="危险示例" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>

在这个带有标签的示例中，我们使用了 .text-dark 文本颜色实用工具类来确保标签在带有浅色背景的进度条上保持可读性。请注意，在使用自定义背景色时，确保进行充分的测试，以确保在各种情况下文本的可读性。

总结

Bootstrap 5 中的进度条提供了一种简单而灵活的方式来显示任务进度。通过结合 HTML、CSS 和可选的 JavaScript 插件，你可以创建出具有丰富交互性和吸引力的进度条，以改善用户的体验。