Bootstrap 进度条学习笔记
Bootstrap 进度条是用于展示加载进度的UI组件，可以通过不同的样式和状态来实现不同的效果。
基本用法
使用 Bootstrap 进度条，需要先引入 Bootstrap 的 CSS 文件和 JS 文件：
htmlCopy Code<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
然后在HTML文档中添加进度条的HTML代码即可：
htmlCopy Code<div class="progress">
<div class="progress-bar" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
其中，progress 类是必须的，用于创建进度条容器。progress-bar 类是用于表示进度条本身，并且需要设置 style 属性来指定宽度，表示当前的进度。当然，也可以使用 JavaScript 来动态改变进度条的宽度。
不同的样式
Bootstrap 进度条提供了多种不同的样式，可以通过添加不同的类来实现。
Success 样式
成功样式的进度条通常用于表示任务已经完成。
htmlCopy Code<div class="progress">
<div class="progress-bar bg-success" style="width: 50%" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Info 样式
信息样式的进度条通常用于表示任务正在进行中。
htmlCopy Code<div class="progress">
<div class="progress-bar bg-info" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Warning 样式
警告样式的进度条通常用于表示任务已经超时或存在异常情况。
htmlCopy Code<div class="progress">
<div class="progress-bar bg-warning" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Danger 样式
危险样式的进度条通常用于表示任务失败或出现重大错误。
htmlCopy Code<div class="progress">
<div class="progress-bar bg-danger" style="width: 10%" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
实例演示
下面是一个基于 Bootstrap 进度条实现的文件上传示例，演示了如何使用进度条来展示上传进度：
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 进度条学习笔记</title>
<!-- 引入 Bootstrap CSS 文件和 JS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 文件上传表单 -->
<form id="file-upload-form" action="#" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="file-input">选择文件：</label>
<input type="file" name="file" id="file-input">
<small class="form-text text-muted">支持 .jpg、.jpeg、.png、.gif 格式的图片文件。</small>
</div>
<button type="submit" class="btn btn-primary">上传</button>
</form>
<!-- 上传进度条 -->
<div class="progress" style="display: none">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<script>
$(function() {
// 当表单被提交时，显示进度条
$('#file-upload-form').on('submit', function(e) {
e.preventDefault();
$('.progress').show();
// 模拟上传过程
var progress = 0;
var interval = setInterval(function() {
progress += Math.floor(Math.random() * 10);
if (progress > 100) progress = 100;
$('.progress-bar').attr('aria-valuenow', progress).css('width', progress + '%');
if (progress === 100) clearInterval(interval);
}, 1000);
});
});
</script>
</body>
</html>
在上面的示例中，我们通过监听表单的提交事件来模拟文件上传过程，并使用进度条来展示上传进度。上传进度条的初始状态是隐藏的，当用户点击“上传”按钮时，才会显示出来。在上传的过程中，我们通过 setInterval 函数定期更新进度条的状态，并且在完成上传后停止更新。