Bootstrap 进度条
概述
Bootstrap 进度条组件用于显示任务的完成进度。它支持堆叠条、动画条纹和文本标签,可以用于文件上传、表单提交、加载状态等场景。
基本进度条
使用 .progress 和 .progress-bar 类创建基本进度条:
html
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>带标签的进度条
在进度条中显示百分比或其他文本:
html
<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 的高度来调整进度条的高度:
html
<!-- 1px 高度 -->
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- 20px 高度 -->
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progress