Bootstrap 进度条

Bootstrap 5 进度条

基本进度条

进度条可用于向用户展示他们在某个过程中的进展程度。Bootstrap 5 提供了一个灵活的进度条组件。

Bootstrap 5 中的默认进度条如下所示（例如：已完成 70%）：

[进度条视觉展示：填充至 70%]

要创建一个默认进度条，给一个 <div> 元素添加 .progress 类，并在其内部添加一个带有 .progress-bar 类的子 <div>。

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar" style="width: 70%">
    <span class="visually-hidden">70% Complete</span>
   </div>
  </div>
 </body>
</html>

注意：Bootstrap 5 组件专为现代浏览器设计。它们利用 CSS3 特性实现效果。可通过 ARIA 属性增强可访问性。

带标签的进度条

要在进度条内部显示可见的百分比或标签，只需将文本放在 .progress-bar 元素内即可。

[进度条视觉展示：填充至 70% 并包含 ‘70%’ 文本]

如果移除 .visually-hidden 类（以前是 .sr-only）或者直接添加文本，它将变得可见：

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar" style="width: 70%">
    70%
   </div>
  </div>
 </body>
</html>

彩色进度条

Bootstrap 提供了背景颜色工具类，可应用于进度条以赋予语义意义（例如：成功、警告、危险）。

进度条常用的背景类包括：

• .bg-success（替换了 .progress-bar-success）
• .bg-info（替换了 .progress-bar-info）
• .bg-warning（替换了 .progress-bar-warning）
• .bg-danger（替换了 .progress-bar-danger）

虽然特定的 .progress-bar-* 颜色类在旧版本中很常见，但 Bootstrap 5 鼓励使用通用的背景颜色工具类（.bg-*）以获得更高的灵活性。

[视觉效果：绿色成功、蓝色信息、黄色警告、红色危险进度条]

使用背景颜色工具类的示例：

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress mb-3" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-success" style="width: 40%">40% Complete (success)</div>
  </div>
  <div class="progress mb-3" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-info" style="width: 50%">50% Complete (info)</div>
  </div>
  <div class="progress mb-3" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-warning text-dark" style="width: 60%">60% Complete (warning)</div>
  </div>
  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-danger" style="width: 70%">70% Complete (danger)</div>
  </div>
 </body>
</html>

注意：对于 .bg-warning 等较浅的背景颜色，您可能需要添加对比鲜明的文本颜色工具类（如 .text-dark）以提高可读性。

条纹进度条

进度条也可以有条纹外观。

[视觉效果：彩色进度条的条纹版本]

给 .progress-bar 元素添加 .progress-bar-striped 类以添加条纹：

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress mb-3" role="progressbar" aria-label="Striped success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar progress-bar-striped bg-success" style="width: 40%">40% Complete</div>
  </div>
  <div class="progress mb-3" role="progressbar" aria-label="Striped info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar progress-bar-striped bg-info" style="width: 50%">50% Complete</div>
  </div>
 </body>
</html>

动态进度条

要为进度条上的条纹添加动画效果，请将 .progress-bar-animated 类添加到条纹进度条上。

[视觉效果：一个带有动态条纹的进度条]

添加 .progress-bar-animated 类（除了 .progress-bar-striped 外）：

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%">
    75%
   </div>
  </div>
 </body>
</html>

堆叠式进度条

进度条也可以堆叠起来，以在单个进度容器中显示多个段。

[视觉效果：一个包含多个彩色段的单个进度条容器，例如：30% 绿色、20% 黄色、15% 红色]

通过在同一个 div.progress 中放置多个 .progress-bar 元素来创建堆叠式进度条：

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress" aria-label="Stacked example">
   <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">Free Space</div>
   <div class="progress-bar bg-warning text-dark" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">Warning</div>
   <div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">Danger</div>
  </div>
 </body>
</html>