Bootstrap源碼學(xué)習(xí)筆記之bootstrap進(jìn)度條
更新時(shí)間：2016年12月24日 09:30:04 作者：藝術(shù)就是爆炸
本文通過源碼給大家解析bootstrap進(jìn)度條樣式，分為條紋進(jìn)度條，動(dòng)態(tài)條紋進(jìn)度條，層疊進(jìn)度條和帶Label的進(jìn)度條，下面通過代碼給大家簡單介紹下，感興趣的朋友一起看看吧
基本樣式
要實(shí)現(xiàn)進(jìn)度條效果要使用兩個(gè)容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。例如：
<div class="progress"> <div class="progress-bar" style="width:40%"></div> </div>
progress樣式主要設(shè)置進(jìn)度條容器的背景色，容器高度、間距等，progress-bar樣式設(shè)置進(jìn)度，主要是設(shè)置了進(jìn)度條的背景顏色和過渡效果。實(shí)現(xiàn)源碼如下：
.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;
-o-transition: width .6s ease;
transition: width .6s ease;
}
彩色進(jìn)度條
在基礎(chǔ)的進(jìn)度條上追加對(duì)應(yīng)的類名即可：
.progress-bar-info：信息進(jìn)度條，進(jìn)度條顏色為藍(lán)色
.progress-bar-success：成功進(jìn)度條，進(jìn)度條顏色為綠色
.progress-bar-warning：警告進(jìn)度條，進(jìn)度條顏色為黃色
.progress-bar-danger：錯(cuò)誤進(jìn)度條，進(jìn)度條顏色為紅色
實(shí)現(xiàn)源碼如下：
.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}
條紋進(jìn)度條
要實(shí)現(xiàn)條紋進(jìn)度條效果只需要在進(jìn)度條的容器“progress”基礎(chǔ)上增加類名“progress-striped”即可。
實(shí)現(xiàn)源碼如下：
.progress-striped .progress-bar,
.progress-bar-striped {
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: -o-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);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
.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: -o-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: -o-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: -o-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: -o-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);
}
動(dòng)態(tài)條紋進(jìn)度條
在進(jìn)度條“progress progress-striped”兩個(gè)類的基礎(chǔ)上再加入“active”類名即可。例如：
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div>
實(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)的正是對(duì)應(yīng)背景中的背景圖片。動(dòng)畫的實(shí)現(xiàn)源碼如下：
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@-o-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;
}
}
調(diào)用動(dòng)畫的實(shí)現(xiàn)源碼如下：
.progress.active .progress-bar,
.progress-bar.active {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
層疊進(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>
我們可以發(fā)現(xiàn)，層疊進(jìn)度條并沒有額外的樣式代碼，之所以這樣就能生效是因?yàn)樵凇皃rogress-bar”上有一個(gè)左浮動(dòng)的樣式。要注意，層疊進(jìn)度條寬度之和不能大于100%。
帶Label的進(jìn)度條
要實(shí)現(xiàn)帶Label的進(jìn)度條，只需要在進(jìn)度條中添加你需要的值即可。例如：
<div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%">20%</div> </div>
要是那進(jìn)度條的值為0%時(shí)，可以這么寫：
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> </div>
以上所述是小編給大家介紹的 Bootstrap源碼學(xué)習(xí)筆記之bootstrap進(jìn)度條，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Bootstrap每天必學(xué)之進(jìn)度條
- BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺
- BootStrap 實(shí)現(xiàn)各種樣式的進(jìn)度條效果
- 有趣的bootstrap走動(dòng)進(jìn)度條
- bootstrap實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
- bootstrap多種樣式進(jìn)度條展示
- Bootstrap進(jìn)度條實(shí)現(xiàn)代碼解析
- Bootstrap 3 進(jìn)度條的實(shí)現(xiàn)
- Bootstrap進(jìn)度條學(xué)習(xí)使用
- Bootstrap實(shí)現(xiàn)各種進(jìn)度條樣式詳解
相關(guān)文章
Js 隨機(jī)數(shù)產(chǎn)生6位數(shù)字
Js隨機(jī)產(chǎn)生6為數(shù)字的代碼，需要的朋友可以參考下。2010-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了js實(shí)現(xiàn)飛入星星特效代碼,主要通過控制背景與飛入點(diǎn)的樣式,結(jié)合setTimeout函數(shù)即可實(shí)現(xiàn)星星飛入的效果,對(duì)于學(xué)習(xí)javascript有不錯(cuò)的參考借鑒價(jià)值,需要的朋友可以參考下2014-10-10
JS apply用法總結(jié)和使用場(chǎng)景實(shí)例分析
這篇文章主要介紹了JS apply用法總結(jié)和使用場(chǎng)景,結(jié)合實(shí)例形式分析了JS apply的基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
基于JavaScript實(shí)現(xiàn)網(wǎng)頁計(jì)算器
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)網(wǎng)頁計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
基于javascript實(shí)現(xiàn)漂亮的頁面過渡動(dòng)畫效果附源碼下載
本文通過javascript實(shí)現(xiàn)漂亮的頁面過濾動(dòng)畫效果，用戶通過點(diǎn)擊頁面左側(cè)的菜單，對(duì)應(yīng)的頁面加載時(shí)伴隨著滑動(dòng)過濾動(dòng)畫，并帶有進(jìn)度條效果。用戶體驗(yàn)度非常好，感興趣的朋友一起看看吧2015-10-10
javascript實(shí)現(xiàn)隨機(jī)讀取數(shù)組的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)讀取數(shù)組的方法,涉及javascript隨機(jī)數(shù)及針對(duì)數(shù)組操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
下面小編就為大家?guī)硪黄肑S屏蔽頁面中的Enter按鍵提交表單的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JS及JQuery對(duì)Html內(nèi)容編碼,Html轉(zhuǎn)義
本文主要介紹了JS及JQuery對(duì)Html內(nèi)容編碼,Html轉(zhuǎn)義的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02