垦荒学园
  • 中文

      • Bootstrap 进度条

      概述

      Bootstrap 进度条组件用于显示任务的完成进度。它支持堆叠条、动画条纹和文本标签，可以用于文件上传、表单提交、加载状态等场景。

      基本进度条

      使用 .progress 和 .progress-bar 类创建基本进度条：

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

      带标签的进度条

      在进度条中显示百分比或其他文本：

      <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 的高度来调整进度条的高度：

      <!-- 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