Bootstrap - 进度条

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

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

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

  • 使用内部.progress-bar显示到目前为止的进度。

  • .progress -bar需要内联样式、实用程序类或自定义 CSS 来设置其宽度。

  • .progress -bar还需要一些角色和aria属性才能使其可访问。

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

基本进度条

这是基本 Bootstrap 进度条的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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 提供了用于设置宽度的实用程序的完整列表。让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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就会自动调整大小。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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中，可以将标签添加到进度条。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

  • 使用溢出：从溢出实用程序中可见，使内容受到限制并变得可读。当进度条比标签短时，这很有用。

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

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

背景

可以使用后台实用程序类更改单个进度条的外观。

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

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

辅助功能提示：进度条使用颜色仅提供视觉指示，这对屏幕阅读器等辅助技术的用户没有帮助。确保内容本身的含义是明确的。

使用替代方法使用.visually-hidden 类来增加内容的清晰度。

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

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

您还可以将新的组合帮助器类用于文本和背景颜色，即颜色和背景。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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 类.progress-stacked创建多个栏。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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类将条纹添加到进度条。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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-animated类添加到.progress-bar。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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