笙亿网络策划

Bootstrap 进度条怎么用？如何自定义样式和动画效果？

约 37 分钟读完 29 阅
文章导读
Previous Quiz Next 本章讨论 Bootstrap 进度条。Bootstrap 中的进度条是用于显示任务或进程进度或完成状态的 UI 组件。通常用于视觉化显示操作进度，例如文件上传、表单提交或数据加载。
📋 目录
  1. 壹 基本进度条
  2. 贰 进度条尺寸
  3. 叁 宽度
  4. 肆 高度
  5. 伍 标签
  6. 陆 背景
  7. 柒 多条进度条
  8. 捌 条纹进度条
  9. 玖 动画条纹
A A

Bootstrap - 进度条

Previous
Quiz
Next

本章讨论 Bootstrap 进度条。Bootstrap 中的进度条是用于显示任务或进程进度或完成状态的 UI 组件。通常用于视觉化显示操作进度，例如文件上传、表单提交或数据加载。

Bootstrap 提供了一组内置 class 来创建不同样式、大小和动画效果的进度条。Bootstrap 还提供了额外的 class 和选项来定制进度条的外观和行为，例如设置不同颜色、添加标签、使用条纹或动画进度条，以及堆叠多个进度条。

  • 使用 .progress 作为包装器来显示进度条的最大值。

  • 使用内部的 .progress-bar 来显示当前的进度。

  • .progress-bar 需要内联样式、utility class 或自定义 CSS 来设置宽度。

  • .progress-bar 还需要一些 role 和 aria 属性来确保可访问性。

  • .progress-stacked 可用于创建多个/堆叠进度条。

基本进度条

以下是一个基本 Bootstrap 进度条的示例：

示例

您可以使用 Edit & Run 选项编辑并运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Progress</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Progress Bar</h4><br>

      <div class="progress">
         <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div><br>
      <div class="progress">
         <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
      </div><br>
      <div class="progress">
         <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
      </div><br>
      <div class="progress">
         <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
      </div><br>
      <div class="progress">
         <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
   </body>
</html>

进度条尺寸

宽度

Bootstrap 提供了一组完整的 utility class 用于设置宽度。我们来看一个例子：

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
         <title>Bootstrap Progress</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
         <h4>Progress Bar</h4><br><br>
         <div class="progress">
           <div class="progress-bar w-25" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
   </body>
</html>

高度

默认情况下，进度条的高度为 1rem，但可以通过 CSS 的 height 属性进行更改。您必须为进度容器和进度条设置相同的高度。

高度值只能在 .progress 上设置，因此一旦在 .progress 容器中更改高度值，内部的 .progress-bar 会自动调整大小。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Progress</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Progress Bar Height</h4><br>
      <div class="progress" style="height: 20px;">
        <div class="progress-bar" role="progressbar" style="width: 25%;height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <br>
      <div class="progress" style="height: 30px;">
        <div class="progress-bar" role="progressbar" style="width: 25%;height: 30px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
   </body>
</html>

标签

可以通过在 .progress-bar 内放置文本来为进度条添加标签。

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Progress</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Progress Bar Label</h4><br>
      <div class="progress">
         <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
         </div>
   </body>
</html>

标签溢出可见/隐藏

  • 为了避免内容从进度条中溢出，.progress-bar 内的内容使用 overflow: hidden 进行控制

  • 使用 overflow utilities 中的 overflow: visible 使内容被截断并可读。这在进度条比标签短时非常有用。

  • 定义明确的文本颜色以使文本可读。

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Progress</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Progress Bar Long Label</h4><br>
      <div class="progress" role="progressbar" aria-label="Example of label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
         <div class="progress-bar overflow-visible text-dark" style="width: 20%">Overflow visible on progress bar, but the label is too long, but the label is too long, but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long</div>
      </div>
      <br>
      <div class="progress" role="progressbar" aria-label="Example of label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar overflow-hidden text-dark" style="width: 20%">Overflow hidden on progress bar, but the label is too long, but the label is too long,but the label is too long,;/div>
      </div>

   </body>
</html>

背景

可以使用 background utility classes 来改变单个进度条的外观。

进度条默认是蓝色（primary）。

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Progress</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Progress Bar Background</h4><br>
      <!-- 蓝色 -->
         <div class="progress">
           <div class="progress-bar" style="width:10%"></div>
         </div><br>

      <!-- 绿色 -->
         <div class="progress">
           <div class="progress-bar bg-success" style="width:20%"></div>
         </div><br>

      <!-- 青绿色 -->
         <div class="progress">
           <div class="progress-bar bg-info" style="width:30%"></div>
         </div><br>

      <!-- 橙色 -->
         <div class="progress">
           <div class="progress-bar bg-warning" style="width:40%"></div>
         </div><br>

      <!-- 红色 -->
         <div class="progress">
           <div class="progress-bar bg-danger" style="width:50%"></div>
         </div><br>

      <!-- 白色 -->
         <div class="progress border">
            <div class="progress-bar bg-white" style="width:60%"></div>
         </div><br>

      <!-- 灰色 -->
         <div class="progress">
            <div class="progress-bar bg-secondary" style="width:70%"></div>
         </div><br>

      <!-- 浅灰色 -->
         <div class="progress border">
           <div class="progress-bar bg-light" style="width:80%"></div>
         </div><br>

      <!-- 深灰色 -->
         <div class="progress">
           <div class="progress-bar bg-dark" style="width:90%"></div>
         </div>

   </body>
</html>

可访问性提示：仅对进度条使用颜色仅提供视觉指示，这对使用屏幕阅读器等辅助技术的用户没有帮助。请确保内容本身就能清楚表达含义。

使用 .visually-hidden class 通过其他方式为内容增加清晰度。

为了使标签在彩色背景上可读，选择合适的文本颜色。

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Progress</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Progress Bar - Text Color</h4>
      <br>

      </div><div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
         <div class="progress-bar bg-success" style="width: 25%">Default text color</div>
      </div><br>
      <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
         <div class="progress-bar bg-info text-dark" style="width: 50%">Dark text on Info</div>
      </div><br>
      <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
         <div class="progress-bar bg-warning text-dark" style="width: 75%">Dark text on warning</div>
      </div><br>
      <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
         <div class="progress-bar bg-danger" style="width: 100%">Light text on danger</div>
      </div>
   </body>
</html>

您还可以使用新的组合辅助类来同时设置文本和背景颜色，即颜色和背景。

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Progress</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Progress Bar - Text & Background Color</h4>
    <br>

    <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
      <div class="progress-bar text-bg-success" style="width: 75%">Text and Background Color</div>
    </div>

  </body>
</html>

多条进度条

进度条可以包含多个堆叠的进度条。使用 Bootstrap class .progress-stacked 来创建多条进度条。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Progress</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Progress Bar - Multiple</h4>
      <br>
      <div class="progress-stacked">
      <div class="progress">
         <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
         <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
         <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
         <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
   </div>
   </body>
</html>

条纹进度条

可以通过向任何 .progress-bar 添加 .progress-bar-striped class 来为进度条添加条纹效果。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Progress</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Striped Progress Bar</h4><br>
      <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
      </div><br>
      <div class="progress">
        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
      </div><br>
      <div class="progress">
        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
      </div><br>
      <div class="progress">
        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
      </div><br>
      <div class="progress">
        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
   </body>
</html>

动画条纹

可以通过 CSS3 动画为进度条添加动画效果，使条纹从右向左动画移动。只需为 .progress-bar 添加 .progress-bar-animated class 即可。

示例

您可以使用 Edit & Run 选项编辑并运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Progress</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Animated Progress Bar</h4><br>

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

   </body>
</html>