Bootstrap 简明教程

Bootstrap - Progress Bars

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

This chapter discusses about Bootstrap progress bars. Progress bars in Bootstrap are UI components that display the progress or completion status of a task or process. They are typically used to visually indicate the progress of an operation, such as file uploads, form submissions, or loading of data.

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

Bootstrap provides a set of in-built classes to create progress bars with different styles, sizes and animations. Bootstrap also provides additional classes and options for customizing the appearance and behavior of progress bars, such as setting different colors, adding labels, using striped or animated progress bars, and stacking multiple progress bars together.

Use the .progress as a wrapper to show the max value of the progress bar.
Use the inner .progress-bar to show the progress so far.
The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
The .progress-bar also requires some role and aria attributes to make it accessible.
The .progress-stacked can be used to create multiple/stacked progress bars.

Basic Progress Bar

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

Here’s an example of a basic Bootstrap progress bar:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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. 列表。让我们看一个示例：

Bootstrap provides a complete list of utilities for setting width. Let us see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 属性更改它。你必须为进度条容器和进度条设置相同的高度。

By default the height of a progress bar is 1rem, but it can be changed using the CSS height property. You must set the same height for the progress container and the progress bar.

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

Height value can be set only on the .progress, so once the value of height is changed in the .progress container, the inner .progress-bar automatically resizes.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 中放置文本，将标签添加到进度条。

Labels can be added to the progress bars by placing text within the .progress-bar.

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

In order to avoid the content getting bleed out of the bar, the content inside the .progress-bar is controlled with overflow: hidden
Use overflow: visible from overflow utilities to make the content capped and become readable. This is useful when the progress bar is shorter than the label.
Define an explicit text color to make the text readable.

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

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

The appearance of individual progress bar can be changed using the background utility classes.

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

The progress bar is blue by default (primary).

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

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

In order to make the labels readable on a colored background, choose appropriate text colors.

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

You can also use the new combined helper classes for text and background color i.e. Color and background.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 创建多个进度条。

A progress bar can have multiple progress bars stacked in it. Use the Bootstrap class .progress-stacked to create multiple bars.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 ，从而添加到进度条中。

Stripes can be added to a progress bar using .progress-bar-striped class to any .progress-bar.

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Animation can be added to a progress bar, where the stripes get animated right to left via CSS3 animations. Add*.progress-bar-animated* class to .progress-bar.

Example

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

You can edit and try running this code using the *Edit & Run *option.

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