Bootstrap 4 Progress Bars
基本進度條
Progress bar can be used to show a user how far along he/she is in a process.
To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar
Progress Bar Height
The height of the progress bar is 16px by default. Use the CSS height property to change it. Note that you must set the same height for the progress container and the progress bar
示例
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
自己動手試一試 »
進度條標籤
Add text inside the progress bar to show the visible percentage
彩色進度條
By default, the progress bar is blue (primary). Use any of the Bootstrap 4 contextual background classes to change its color
示例
<!-- Blue -->
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Grey -->
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Light Grey -->
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
自己動手試一試 »
條紋進度條
Use the .progress-bar-striped class to add stripes to the progress bars
示例
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
自己動手試一試 »
動畫進度條
Add the .progress-bar-animated class to animate the progress bar
示例
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
自己動手試一試 »
Multiple Progress Bars
進度條也可以堆疊
示例
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
免費空間
</div>
<div class="progress-bar bg-warning" style="width:10%">
警告
</div>
<div class="progress-bar bg-danger" style="width:20%">
危險
</div>
</div>
自己動手試一試 »
