Skip to content

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

本站内容仅供学习和研究使用。