当前位置：首页 > news >正文

Bootstrap5 进度条

news 2025/11/15 9:47:31

Bootstrap5 进度条

Bootstrap 是一个流行的前端框架，它为开发者提供了一系列的工具和组件，以简化网页设计和开发过程。Bootstrap5 是该框架的最新版本，它带来了许多新特性和改进。本文将详细介绍 Bootstrap5 中的进度条组件，包括其使用方法、样式定制以及如何与 JavaScript 事件结合使用。

进度条概述

进度条是 Bootstrap5 中用于显示任务完成进度的组件。它通常用于显示长时间运行的进程，如文件上传、异步操作等。进度条可以直观地展示任务的进度，提高用户体验。

使用进度条

基本用法

要在页面中添加一个进度条，首先需要引入 Bootstrap5 的 CSS 文件。以下是进度条的基本用法：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap5 进度条示例</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container"><h2>基本进度条</h2><div class="progress"><div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div>
</div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在上面的示例中，我们创建了一个宽度为 25% 的进度条，表示任务完成了 25%。

进度条样式

Bootstrap5 提供了多种进度条样式，包括条纹、动画和标签等。以下是一些常用的进度条样式：

条纹进度条：通过添加 progress-bar-striped 类，可以使进度条具有条纹效果。

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

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

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

标签进度条：通过添加 progress-bar-label 类，可以在进度条上显示标签。

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

进度条与 JavaScript 事件结合

进度条可以与 JavaScript 事件结合使用，以便在任务执行过程中动态更新进度条。以下是一个示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap5 进度条与 JavaScript 结合示例</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container"><h2>进度条与 JavaScript 结合</h2><div class="progress"><div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div></div><button onclick="updateProgress()">更新进度</button>
</div><script>
function updateProgress() {var progressBar = document.getElementById('progressBar');var progress = 0;var interval = setInterval(function () {if (progress >= 100) {clearInterval(interval);} else {progress += 10;progressBar.style.width = progress + '%';progressBar.textContent = progress + '%';}}, 100);
}
</script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在上面的示例中，我们使用 JavaScript 中的 setInterval 函数动态更新进度条的宽度。当用户点击“更新进度”按钮时，进度条将逐渐增加，直到达到 100%。