Bootstrap進(jìn)度條組件知識(shí)詳解

2019-11-20 10:10:51

字體：大中小

供稿：網(wǎng)友

在網(wǎng)頁(yè)中，經(jīng)常見到進(jìn)度條效果，如：平分系統(tǒng)、加載狀態(tài)等，進(jìn)度條組件使用了css3的transition和animation屬性來(lái)完成一些特效，這些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 屬性。

進(jìn)度條和其他獨(dú)立組件一樣，開發(fā)者可以根據(jù)自己的需要選擇對(duì)應(yīng)的版本：

LESS: progress-bars.less

SASS: _progress-bars.scss

基礎(chǔ)進(jìn)度條

實(shí)現(xiàn)原理：

需要兩個(gè)容器，外容器使用類名.progress，子容器使用類名.progress-bar;其中.progress用來(lái)設(shè)置進(jìn)度條容器的背景色，容器的高度，間距等；而.progress-bar設(shè)置進(jìn)度方向，進(jìn)度條的背景色和過度效果；下面是css源碼：

progress {height: 20px;margin-bottom: 20px;overflow: hidden;background-color: #f5f5f5;border-radius: 4px;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);}.progress-bar {float: left;width: 0;height: 100%;font-size: 12px;line-height: 20px;color: #fff;text-align: center;background-color: #428bca;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);-webkit-transition: width .6s ease;transition: width .6s ease;}

例子：

<div class="progress"><div class="progress-bar" style="width:30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">30%</span></div></div>

role屬性作用：告訴搜索引擎這個(gè)div的作用是進(jìn)度條；

aria-valuenow=”30”屬性作用：當(dāng)前進(jìn)度條的進(jìn)度為40%；

aria-valuemin=”0”屬性作用：進(jìn)度條的最小值為0%；

aria-valuemax=”100”屬性作用：進(jìn)度條的最大值為100%；

可以將設(shè)置了.sr-only類的<span>標(biāo)簽從進(jìn)度條組件中移除，而讓當(dāng)前進(jìn)度顯示出來(lái)；

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

彩色進(jìn)度條

彩色進(jìn)度條和警告進(jìn)度條一樣，為了能給用戶一個(gè)更好的體驗(yàn)，也根據(jù)不同的狀態(tài)配置了不同的進(jìn)度條顏色，主要包括以下四種：

progress-bar-info:表示信息進(jìn)度條，藍(lán)色

progress-bar-success:表示成功進(jìn)度條，綠色

progress-bar-warning:表示警告進(jìn)度條，黃色

progress-bar-danger:表示錯(cuò)誤進(jìn)度條，紅色

css源碼：

.progress-bar-success {background-color: #5cb85c;}.progress-bar-info {background-color: #5bc0de;}.progress-bar-warning {background-color: #f0ad4e;}.progress-bar-danger {background-color: #d9534f;}

使用方法：

只需要在基礎(chǔ)進(jìn)度條上增加對(duì)應(yīng)的類名即可

例子：

<h1>彩色進(jìn)度條</h1><div class="progress"><div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div><div class="progress"><div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div></div><div class="progress"><div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div></div><div class="progress"><div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div></div>

效果如下：

條紋進(jìn)度條

條紋進(jìn)度條采用css3的線性漸變來(lái)實(shí)現(xiàn)，并未借助任何圖片，使用條紋進(jìn)度條只需在進(jìn)度條的容器.progress基礎(chǔ)上追加類名”progress-striped”,如果要進(jìn)度條紋像彩色進(jìn)度一樣，具有彩色效果，只需在進(jìn)度條上增加相應(yīng)得顏色類名

下面是.progress-striped樣式源碼：

.progress-striped .progress-bar {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-size: 40px 40px;}

條紋進(jìn)度對(duì)應(yīng)的每種狀態(tài)也有不同的顏色

.progress-striped .progress-bar-success {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-info {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-warning {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-danger {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}

下面來(lái)看看條紋進(jìn)度條的運(yùn)用：

<h1>條紋進(jìn)度條</h1><div class="progress progress-striped"><div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div></div>

動(dòng)態(tài)條紋進(jìn)度條

在進(jìn)度條.progress 、.progress-striped兩個(gè)類的基礎(chǔ)上在加入類名.active就能實(shí)現(xiàn)動(dòng)態(tài)條紋進(jìn)度條。

其實(shí)現(xiàn)原理主要是通過css3的animation來(lái)完成。首先通過@keyframes創(chuàng)建了一個(gè)progress-bar-stripes的動(dòng)畫，這個(gè)動(dòng)畫主要做了一件事，就是改變背景圖像的位置，也就是 background-position的值。因?yàn)闂l紋進(jìn)度條是通過CSS3的線性漸變來(lái)制作的，而linear-gradient實(shí)現(xiàn)的正是對(duì)應(yīng)背景中的背景圖片

下面是css源碼：

@-webkit-keyframes progress-bar-stripes {from {background-position: 40px 0;}to {background-position: 0 0;}}@keyframes progress-bar-stripes {from {background-position: 40px 0;}to {background-position: 0 0;}}

@keyframes僅僅是創(chuàng)建了一個(gè)動(dòng)畫效果，如果要讓進(jìn)度條真正的動(dòng)起來(lái)，我們需要通過一定的方式調(diào)用@keyframes創(chuàng)建的動(dòng)畫 “progress-bar-stripes”，并且通過一個(gè)事件觸發(fā)動(dòng)畫生效。在Bootstrap框架中，通過給進(jìn)度條容器“progress”添加一個(gè)類名“active”，并讓文檔加載完成就觸“progress-bar-stripes”動(dòng)畫生效

調(diào)用動(dòng)畫對(duì)應(yīng)的樣式代碼如下：

.progress.active .progress-bar {-webkit-animation: progress-bar-stripes 2s linear infinite;animation: progress-bar-stripes 2s linear infinite;}

例子：

<h1>動(dòng)態(tài)條紋進(jìn)度條</h1><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div></div>

效果如下（由于是直接從網(wǎng)頁(yè)上結(jié)果來(lái)的圖，這里并看不到它的動(dòng)態(tài)效果）：

層疊進(jìn)度條：

層疊進(jìn)度可以將不容狀態(tài)的進(jìn)度條放在一起，按水平方式排列

例子：

<div class="progress"><div class="progress-bar progress-bar-success" style="width:20%"></div><div class="progress-bar progress-bar-info" style="width:10%"></div><div class="progress-bar progress-bar-warning" style="width:30%"></div><div class="progress-bar progress-bar-danger" style="width:15%"></div></div>

除了層疊彩色進(jìn)度條之外，還可以層疊條紋進(jìn)度條，或者說(shuō)條紋進(jìn)度條和彩色進(jìn)度條混合層疊，僅需要在“progress”容器中添加對(duì)應(yīng)的進(jìn)度條，同樣要注意，層疊的進(jìn)度條之和不能大于100%。

下面來(lái)看一個(gè)例子：

<div class="progress"><div class="progress-bar progress-bar-success" style="width:20%"></div><div class="progress-bar progress-bar-info" style="width:20%"></div><div class="progress-bar progress-bar-warning" style="width:30%"></div><div class="progress-bar progress-bar-danger" style="width:15%"></div></div><div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div><div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div><div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div><div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div></div><div class="progress"><div class="progress-bar progress-bar-success" style="width:20%"></div><div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div><div class="progress-bar progress-bar-warning" style="width:30%"></div><div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div></div>