您好,登錄后才能下訂單哦!
這篇文章主要介紹Bootstrap中的進(jìn)度條組件有什么用,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
在網(wǎng)頁中,進(jìn)度條的效果并不少見,如:平分系統(tǒng)、加載狀態(tài)等,進(jìn)度條組件使用了css3的transition和animation屬性來完成一些特效,這些特效在IE9及IE9以下版本、Firefox的老版本中并不支持,Opera 12 不支持 animation 屬性。
進(jìn)度條和其他獨(dú)立組件一樣,開發(fā)者可以根據(jù)自己的需要選擇對應(yīng)的版本:
LESS: progress-bars.less
SASS: _progress-bars.scss
基礎(chǔ)進(jìn)度條
實(shí)現(xiàn)原理:
需要兩個(gè)容器,外容器使用類名.progress,子容器使用類名.progress-bar;其中.progress用來設(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è)p的作用是進(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)度顯示出來;
<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)度條上增加對應(yīng)的類名即可
例子:
<h2>彩色進(jìn)度條</h2> <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的線性漸變來實(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)度對應(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); }
下面來看看條紋進(jìn)度條的運(yùn)用:
<h2>條紋進(jìn)度條</h2> <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來完成。首先通過@keyframes創(chuàng)建了一個(gè)progress-bar-stripes的動(dòng)畫,這個(gè)動(dòng)畫主要做了一件事,就是改變背景圖像的位置,也就是 background-position的值。因?yàn)闂l紋進(jìn)度條是通過CSS3的線性漸變來制作的,而linear-gradient實(shí)現(xiàn)的正是對應(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)起來,我們需要通過一定的方式調(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)畫對應(yīng)的樣式代碼如下:
.progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; }
例子:
<h2>動(dòng)態(tài)條紋進(jìn)度條</h2> <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)頁上結(jié)果來的圖,這里并看不到它的動(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)度條,或者說條紋進(jìn)度條和彩色進(jìn)度條混合層疊,僅需要在“progress”容器中添加對應(yīng)的進(jìn)度條,同樣要注意,層疊的進(jìn)度條之和不能大于100%。
下面來看一個(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>
以上是“Bootstrap中的進(jìn)度條組件有什么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。