Bootstrap 简明教程

Bootstrap - Progress Bars

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

Bootstrap 提供了一组内置类来创建具有不同样式、大小和动画的进度条。Bootstrap 也提供了用于自定义进度条的外观和行为的其他类和选项，例如设置不同的颜色、添加标签、使用条纹或动画进度条以及将多个进度条叠加在一起。

使用 .progress 作为包装器来显示进度条的最大值。
使用内部 .progress-bar 来显示到目前为止的进度。
要设置它们的宽度， .progress-bar 需要内联样式、实用程序类或自定义 CSS。
.progress-bar 也需要一些 role 和 aria 属性使其易于访问。
.progress-stacked 可用于创建多条/堆叠进度条。

Basic Progress Bar

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>

Bar Sizing

Width

Bootstrap 提供了一份完整的 utilities for setting width. 列表。让我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>

Height

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

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>

Labels

可以通过在 .progress-bar 中放置文本，将标签添加到进度条。

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>

Label Overflow Visible/Hidden

为了防止内容超出进度条，.progress-bar 中的内容使用 overflow: hidden 进行控制。
使用溢出工具的 overflow: visible 使内容受限并使其可读。当进度条短于标签时，这一点非常有用。
定义明确的文本颜色，以使文本可读。

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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

可以使用背景实用类更改单个进度条的外观。

进度条默认（主）为蓝色。

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>
      <!-- Blue -->
         <div class="progress">
           <div class="progress-bar" style="width:10%"></div>
         </div><br>

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

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

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

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

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

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

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

      <!-- Dark Grey -->
         <div class="progress">
           <div class="progress-bar bg-dark" style="width:90%"></div>
         </div>

   </body>
</html>

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>

你还可以使用文本和背景颜色的新组合辅助类，例如 Color and background 。

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>

Multiple Bars

一个进度条可以有多个进度条堆叠其中。使用 Bootstrap 类 .progress-stacked 创建多个进度条。

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>

Striped Progress Bar

条纹可以通过 .progress-bar-striped 类添加到任何 .progress-bar ，从而添加到进度条中。

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>

Animated Stripes

可以通过把 CSS3 动画添加到进度条，使条纹从右到左的动画，从而给进度条添加动画。向 .progress-bar 添加 progress-bar-animated 类。

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>