Bootstrap 5 进度条

最新推荐文章于 2025-12-19 12:03:37 发布

原创最新推荐文章于 2025-12-19 12:03:37 发布 · 413 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

Bootstrap 5 进度条

引言

Bootstrap 5 是目前最流行的前端框架之一，它提供了一套丰富的组件和工具，帮助开发者快速构建响应式、移动设备优先的网页。在本文中，我们将重点探讨 Bootstrap 5 中的进度条组件，包括其基本用法、定制选项以及如何在项目中集成。

基本进度条

在 Bootstrap 5 中，创建一个基本的进度条非常简单。以下是一个基本的进度条示例：

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

在这个例子中，.progress 类用于创建一个进度条的容器，而 .progress-bar 类用于表示实际的进度。通过设置 style 属性的 width，你可以控制进度条的进度。此外，aria-valuenow、aria-valuemin 和 aria-valuemax 属性有助于提高进度条的无障碍性。

进度条颜色

Bootstrap 5 提供了多种预定义的进度条颜色，你可以通过添加相应的类来改变进度条的颜色。例如：

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

在这个例子中，.bg-success 类将进度条的颜色设置为绿色，表示成功。

条纹进度条

如果你想要一个带有条纹的进度条，可以添加 .progress-bar-striped 类：

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

动画进度条

通过添加 .progress-bar-animated 类，你可以使进度条具有动画效果：

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

定制进度条

Bootstrap 5 的进度条组件也非常容易定制。你可以通过修改 CSS 变量来自定义进度条的样式，例如改变高度、颜色等。

.progress {
  --bs-progress-height: 1rem;
  --bs-progress-bg: #dee2e6;
  --bs-progress-border-radius: 0.375rem;
  --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

在上面的例子中，我们改变了进度条的高度、背景颜色、边框半径和阴影。