Bootstrap 中的进度条使用了哪些上下文类？

在Bootstrap中，使用进度条可以有效地展示任务进度、加载进度等信息。进度条不仅能够体现页面的交互性，还可以有效地引导用户在页面中进行操作。

在Bootstrap中，进度条使用了如下上下文类：

• .progress：定义进度条主容器；
• .progress-bar：定义进度条子容器；
• .progress-bar-striped：定义一个带有斑马条纹的进度条；
• .progress-bar-animated：定义一个带有动画效果的进度条。

下面分别介绍每个上下文类的用法和效果。

.progress

该上下文类用于定义进度条主容器，其用法如下：

<div class="progress">
  ...
</div>

这里的省略号指的是进度条子容器.progress-bar。.progress类将其它的类组合在一起，形成一个完整的进度条。

.progress-bar

.progress-bar用于定义进度条子容器，根据不同的值改变长度。其用法如下：

<div class="progress">
  <div class="progress-bar"></div>
</div>

我们需要设置宽度来控制进度条的长度，可以使用CSS的width属性或者Bootstrap提供的w-*类来设置进度条的长度。例如：

<div class="progress">
  <div class="progress-bar" style="width: 70%;"></div>
</div>

<div class="progress">
  <div class="progress-bar w-25"></div>
</div>

上述代码分别设置了进度条为70%和25%的效果。

.progress-bar-striped

.progress-bar-striped用于为进度条添加一个斑马条纹的效果，代表进度正在递增。其用法如下：

<div class="progress">
  <div class="progress-bar progress-bar-striped"></div>
</div>

.progress-bar-animated

.progress-bar-animated用于为进度条添加一个动画效果，代表进度正在递增。其用法与.progress-bar-striped类似，只需在.progress-bar上添加该类即可：

<div class="progress">
  <div class="progress-bar progress-bar-animated"></div>
</div>

值得注意的是，两个类同时使用时，.progress-bar-animated将覆盖.progress-bar-striped的效果，因为只能有一个动画效果。

综上所述，Bootstrap中的进度条使用了.progress、.progress-bar、.progress-bar-striped和.progress-bar-animated等上下文类，可以满足不同需求的进度条展示效果。