BootStrap組件之進(jìn)度條的基本用法

更新時間：2017年01月19日 17:13:38 作者：zaichuanguanshui

bootstrap組件在前端開發(fā)中經(jīng)常會用到，今天小編通過本文給大家分享bootstrap組件之進(jìn)度條的基本用法，需要的朋友參考下吧

1、進(jìn)度條基本用法

主要依賴.progress和.progress-bar

aria-valuenow表示當(dāng)前值

aria-valuemin表示最小值

aria-valuemax表示最大值

width:60%表示當(dāng)前進(jìn)度條位置

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

2、帶有提示標(biāo)簽的進(jìn)度條

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

3、根據(jù)情境變化效果

這里寫圖片描述

<div class="progress">
  <div class="progress-bar progress-bar-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>

.progress-bar-danger
.progress-bar-info
.progress-bar-success
.progress-bar-warning

4、條紋效果

.progress-bar-striped可以和其他狀態(tài)的類一起使用

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

5、動畫效果

為 .progress-bar-striped 添加 .active 類，使其呈現(xiàn)出由右向左運(yùn)動的動畫效果。

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

6、堆疊效果

把多個進(jìn)度條放入同一個 .progress 中，使它們呈現(xiàn)堆疊的效果。

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

以上所述是小編給大家介紹的BootStrap組件之進(jìn)度條的基本用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: