码农教程 - 一技在手,衣食无忧! tools

Bootstrap .progress

❮ 上一节 下一节 ❯

基本进度条

进度条可用于向用户显示他/她在进程中进行了多远。

Bootstrap 提供了几种类型的进度条。

Bootstrap 中的默认进度条如下所示：

70% 完成

要创建默认进度条，请添加.progress类到一个<div>元素：

示例

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>
亲自试一试 »

笔记：Internet Explorer 9 及更早版本不支持进度条（因为它们使用 CSS3 过渡和动画来实现某些效果）。

笔记：为了帮助提高使用屏幕阅读器的用户的可访问性，您应该包含 aria-* 属性。

带标签的进度条

带有标签的进度条如下所示：

70%

去除.sr-only类从进度条显示可见的百分比：

示例

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>
亲自试一试 »

彩色进度条

上下文类用于提供"meaning through colors"。

可与进度条一起使用的上下文类有：

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40% 完成（成功）
50% 完成（信息）
60% 完成（警告）
70% 完成（危险）

以下示例展示了如何使用不同的上下文类创建进度条：

示例

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
亲自试一试 »

条纹进度条

进度条也可以是条纹的：

40% 完成（成功）
50% 完成（信息）
60% 完成（警告）
70% 完成（危险）

添加类.progress-bar-striped向进度条添加条纹：

示例

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
亲自试一试 »

动画进度条

40%

添加类.active使进度条动画化：

示例

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>
亲自试一试 »

堆叠进度条

进度条也可以堆叠：

可用空间
警告
危险

通过将多个进度条放入同一进度条中来创建堆叠进度条<div class="progress">:

示例

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>
亲自试一试 »

通过练习测试一下

练习:

添加正确的类以使该 HTML 代码充当进度条。

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>

开始练习


❮ 上一节 下一节 ❯