Bootstrap4 进度条学习笔记

Bootstrap4 提供了一种简单易用的进度条组件，可以用于展示任务进度、文件上传进度等场景。本文将介绍 Bootstrap4 进度条的使用方法，并提供实例演示。

使用方法

基础用法

要创建一个基本的进度条，您只需要添加一个带有 .progress 类的 <div> 元素，内部再添加一个带有 .progress-bar 类的 <div> 元素就可以了。.progress-bar 类用于定义进度条的样式，可以通过编写 CSS 样式表来自定义进度条的外观。

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

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

其中，role 属性为 "progressbar"，表示进度条的角色；style 属性用于指定当前进度的宽度，单位为百分比；aria-valuenow 属性表示当前进度的值；aria-valuemin 和 aria-valuemax 属性则分别表示进度条的最小和最大值。

颜色和高度

Bootstrap4 进度条支持多种颜色和高度选项。您可以在 .progress-bar 中使用类似 .bg-success、.bg-info、.bg-warning、.bg-danger 等预定义类来设置不同的颜色。

以下是一个进度条颜色示例：

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

您还可以设置进度条的高度，通过在 .progress 中添加 .progress-sm 或 .progress-lg 类来分别设置小号和大号进度条的高度。

以下是一个进度条高度示例：

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

实例演示

下面是一个完整的 Bootstrap4 进度条实例演示，您可以借助此示例更好地理解进度条的使用方法。

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap4 进度条实例演示</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container py-5">
    <div class="row">
      <div class="col-md-6">
        <h2>默认进度条</h2>
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="col-md-6">
        <h2>带有颜色的进度条</h2>
        <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h2>带有高度的进度条</h2>
        <div class="progress progress-lg">
          <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="col-md-6">
        <h2>带有标签的进度条</h2>
        <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>