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

發(fā)布時(shí)間：2020-09-20 07:47:49 來(lái)源：腳本之家閱讀：158 作者：zaichuanguanshui 欄目：web開(kāi)發(fā)

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" ></div>
</div>

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

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

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

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

<div class="progress">
  <div class="progress-bar progress-bar-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
    <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" >
    <span>60%</span>
  </div>
</div>

5、動(dòng)畫(huà)效果

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

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

6、堆疊效果

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

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

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

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽