Bootstrap3如何實現(xiàn)進(jìn)度條

這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap3如何實現(xiàn)進(jìn)度條，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

基本樣式

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">60% Complete</span>
 </div>
</div>

自帶進(jìn)度

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

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" >
 0%
 </div>
</div>
<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" >
 2%
 </div>
</div>

多種顏色

<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">40% Complete (success)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">20% Complete</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">60% Complete (warning)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">80% Complete (danger)</span>
 </div>
</div>

條紋

<div class="progress">
 <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">40% Complete (success)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">20% Complete</span>
 </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" >
 <span class="sr-only">60% Complete (warning)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">80% Complete (danger)</span>
 </div>
</div>

動態(tài)

<div class="progress">
 <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" >
 <span class="sr-only">45% Complete</span>
 </div>
</div>

堆疊

<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>

關(guān)于“Bootstrap3如何實現(xiàn)進(jìn)度條”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。