Bootstrap

解释如何使用 Bootstrap 创建备用进度条和条纹进度条？

参考答案：

Bootstrap 是一种流行的前端框架，提供了许多预先设计好的 CSS 样式和组件，可以帮助开发者快速构建美观、响应式的网页。其中，进度条是 Bootstrap 中的一个常见组件，用于展示任务或操作的完成进度。

以下是使用 Bootstrap 创建备用进度条和条纹进度条的步骤：

1. 备用进度条

备用进度条是指没有填充颜色的进度条，通常用于表示尚未开始或已完成的任务。要创建一个备用进度条，可以使用 Bootstrap 的 .progress 类和 .progress-bar 类，但不需要指定进度条的颜色。

例如，以下代码将创建一个宽度为 50% 的备用进度条：

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

在这个例子中，.progress 类用于创建进度条的外框，.progress-bar 类用于创建进度条本身。role="progressbar" 属性告诉屏幕阅读器这是一个进度条，style="width: 50%;" 属性设置进度条的宽度为 50%，aria-valuenow="50" 属性设置当前进度值，aria-valuemin="0" 和 aria-valuemax="100" 属性设置进度条的最小值和最大值。

2. 条纹进度条

条纹进度条是指在进度条上添加横向条纹的样式，可以使进度条看起来更加立体和生动。要创建一个条纹进度条，可以在 .progress-bar 类上添加 .progress-bar-striped 类。

例如，以下代码将创建一个宽度为 75% 的条纹进度条：

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

在这个例子中，.progress-bar-striped 类被添加到 .progress-bar 类上，以创建条纹样式。其他属性和上面介绍的备用进度条相同。

除了条纹样式，Bootstrap 还提供了动画条纹样式，可以在进度条上添加动态的横向条纹效果。要创建动画条纹进度条，可以在 .progress-bar-striped 类上再添加 .progress-bar-animated 类。

例如，以下代码将创建一个宽度为 100% 的动画条纹进度条：

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

在这个例子中，.progress-bar-animated 类被添加到 .progress-bar-striped 类上，以创建动画效果。其他属性和上面介绍的备用进度条和条纹进度条相同。