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