Bootstrap-进度条

Bootstrap是一个流行的前端框架，提供了许多易于使用和自定义的UI组件。其中之一是进度条。进度条可以用于显示正在进行的任务的进度，如文件上传或下载。它也可以用于表示页面加载的进度。

使用

要使用Bootstrap进度条，您必须在HTML页面中包含以下代码：

<!-- 引入Bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-r+ij4p4uNPnEjZ7JCr71zrK1JgLWnu9IvPILoKBQNPoCJlDl1Z8IFGBZlJ50N/vgN+pfWQb8+qL3xm/SPJtP7g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Bootstrap 进度条 -->
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

上述代码将显示一个25％的进度条。

类型

Bootstrap进度条提供了以下几种类型：

基本

基本进度条需要在具体哪里实现，获取实际进度值再更新。

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

分段

分段进度条允许您将进度划分为多个段。 每个段可以具有不同的颜色。

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-danger" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

动画

你也可以让你的进度条动起来。

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

高度

<div class="progress" style="height: 50px;">
  <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>

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  <small class="text-muted ml-2">25%</small>
</div>

<div class="progress">
  <small class="text-muted mr-2">25%</small>
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  <small class="text-muted ml-2">100%</small>
</div>

结论

以上是Bootstrap进度条的介绍。它是一个非常有用的UI组件，可以帮助您向用户显示任务进度和页面加载进度。果断使用吧！