建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap4 進度條
進度條可以顯示用戶任務(wù)的完成過程。
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比南鄭網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式南鄭網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋南鄭地區(qū)。費用合理售后完善，十載實體公司更值得信賴。
創(chuàng)建一個基本的進度條的步驟如下：
- 添加一個帶有 .progress 類的 。
- 接著，在上面的
內(nèi)，添加一個帶有 class .progress-bar 的空的。- 添加一個帶有百分比表示的寬度的 style 屬性，例如 style="width:70%" 表示進度條在 70% 的位置。
實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar
"
style
=
"
width:70%
"
>
div
>
div
>
嘗試一下 ?進度條高度
進度條高度默認為 16px。我們可以使用 CSS 的
height屬性來修改他：實例
<
div
class
=
"
progress
"
style
=
"
height:20px;
"
>
<
div
class
=
"
progress-bar
"
style
=
"
width:40%;
"
>
div
>
div
>
嘗試一下 ?進度條標簽
可以在進度條內(nèi)添加文本，如進度的百分比：
實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar
"
style
=
"
width:70%
"
>
70%
div
>
div
>
嘗試一下 ?不同顏色的進度條
默認情況下進度條為藍色，Bootstrap4 還提供了以下顏色的進度條：
實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-success
"
style
=
"
width:40%
"
>
div
>
div
>
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-info
"
style
=
"
width:50%
"
>
div
>
div
>
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-warning
"
style
=
"
width:60%
"
>
div
>
div
>
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-danger
"
style
=
"
width:70%
"
>
div
>
div
>
嘗試一下 ?條紋的進度條
可以使用
.progress-bar-striped類來設(shè)置條紋進度條：實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar progress-bar-striped
"
style
=
"
width:40%
"
>
div
>
div
>
嘗試一下 ?動畫進度條
使用
.progress-bar-animated類可以為進度條添加動畫：實例
<
div
class
=
"
progress-bar progress-bar-striped progress-bar-animated
"
style
=
"
width: 40%
"
>
div
>
嘗試一下 ?混合色彩進度條
進度條可以設(shè)置多種顏色：
實例
<
div
class
=
"
progress
"
>
<
div
class
=
"
progress-bar bg-success
"
style
=
"
width:40%
"
>
Free Space
div
>
<
div
class
=
"
progress-bar bg-warning
"
style
=
"
width:10%
"
>
Warning
div
>
<
div
class
=
"
progress-bar bg-danger
"
style
=
"
width:20%
"
>
Danger
div
>
div
>
嘗試一下 ?
標題名稱：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4進度條
文章起源：http://www.5511xx.com/article/coiggch.html - 接著，在上面的
