Bootstrap 进度条

最新推荐文章于 2024-06-25 02:30:06 发布

书香水墨

最新推荐文章于 2024-06-25 02:30:06 发布

阅读量917

点赞数 1

分类专栏：前端文章标签： Bootstrap

本文链接：https://blog.csdn.net/qq_27870421/article/details/97143306

版权

前端专栏收录该内容

178 篇文章 7 订阅

订阅专栏

`一、Bootstrap 进度条`

1.1 默认进度条

<div class="container">
  <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
  </div>
</div>

1.2 进度条高度

<div class="container">
  <div class="progress" style="height:10px;">
    <div class="progress-bar" style="width:40%;"></div>
  </div>
  <br>
  <div class="progress" style="height:20px;">
    <div class="progress-bar" style="width:50%;"></div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar" style="width:60%;"></div>
  </div>
</div>

1.3 进度条标签

<div class="container">
  <div class="progress">
    <div class="progress-bar" style="width:70%">70%</div>
  </div>
</div>

1.4 不同颜色的进度条

<div class="container">
  <div class="progress">
    <div class="progress-bar" style="width:30%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success" style="width:40%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning" style="width:60%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:70%"></div>
  </div>
</div>

1.5 条纹的进度条

<div class="container">
  <div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:30%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
  </div>
</div>

1.6 动画进度条

<div class="container">
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
  </div>
</div>

1.7 混合色彩进度条

<div class="container">
  <div class="progress">
    <div class="progress-bar bg-success" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar bg-warning" style="width:10%">
      Warning
    </div>
    <div class="progress-bar bg-danger" style="width:20%">
      Danger
    </div>
  </div>
</div>