有渔前端团队

组件

项目中各种通用的 UI 组件的示例

进度条

用于课程学习等需要显示进度的地方。使用时一定要在 .progress-bar 上添加 aria-valuenow 属性，当属性值为 0 或 100 时进度条上的白色「刻度线」不显示。

组件来自 Bootstrap 3，使用方法参见官方文档。

目录

尺寸

有粗、细两种尺寸，其中粗的为默认尺寸。

粗的

<!-- HTML -->

<div class="progress">
  <div class="progress-bar" aria-valuenow="0" style="width: 0%;"></div>
</div>
<div class="progress">
  <div class="progress-bar" aria-valuenow="60" style="width: 60%;"></div>
</div>
<div class="progress">
  <div class="progress-bar" aria-valuenow="100" style="width: 100%;"></div>
</div>

用于单个数据的进度条。红色部分表示未完成；绿色部分表示已完成；白色部分为刻度条。

细的

<!-- HTML -->

<div class="progress progress-small">
  <div class="progress-bar" aria-valuenow="0" style="width: 0%;"></div>
</div>
<div class="progress progress-small">
  <div class="progress-bar" aria-valuenow="60" style="width: 60%;"></div>
</div>
<div class="progress progress-small">
  <div class="progress-bar" aria-valuenow="100" style="width: 100%;"></div>
</div>

用于列表数据的进度条。红色部分表示未完成；绿色部分表示已完成；白色部分为刻度条。

带标示

文本在下面

0%
60%
100%
<!-- HTML -->

<div class="progress">
  <div class="progress-bar" aria-valuenow="0" style="width: 0%;"><span class="progress-label">0%</span></div>
</div>
<div class="progress">
  <div class="progress-bar" aria-valuenow="60" style="width: 60%;"><span class="progress-label">60%</span></div>
</div>
<div class="progress">
  <div class="progress-bar" aria-valuenow="100" style="width: 100%;"><span class="progress-label">100%</span></div>
</div>

文本在右边

0%
60%
100%
<!-- HTML -->

<div class="progress-container progress-small">
  <span class="progress-label">0%</span>
  <div class="progress">
    <div class="progress-bar" aria-valuenow="0" style="width: 0%;"></div>
  </div>
</div>
<div class="progress-container progress-small">
  <span class="progress-label">60%</span>
  <div class="progress">
    <div class="progress-bar" aria-valuenow="60" style="width: 60%;"></div>
  </div>
</div>
<div class="progress-container progress-small">
  <span class="progress-label">100%</span>
  <div class="progress">
    <div class="progress-bar" aria-valuenow="100" style="width: 100%;"></div>
  </div>
</div>
设计师 开发者