基本樣式
要實現進度條效果要使用兩個容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。例如：
<div class="progress"> <div class="progress-bar" style="width:40%"></div></div>
progress樣式主要設置進度條容器的背景色，容器高度、間距等，progress-bar樣式設置進度，主要是設置了進度條的背景顏色和過渡效果。實現源碼如下：
.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;}彩色進度條
在基礎的進度條上追加對應的類名即可：
.progress-bar-info：信息進度條，進度條顏色為藍色
.progress-bar-success：成功進度條，進度條顏色為綠色
.progress-bar-warning：警告進度條，進度條顏色為黃色
.progress-bar-danger：錯誤進度條，進度條顏色為紅色
實現源碼如下：
.progress-bar-success { background-color: #5cb85c;}.progress-bar-info { background-color: #5bc0de;}.progress-bar-warning { background-color: #f0ad4e;}.progress-bar-danger { background-color: #d9534f;}條紋進度條
要實現條紋進度條效果只需要在進度條的容器“progress”基礎上增加類名“progress-striped”即可。
實現源碼如下：
.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);}動態條紋進度條
在進度條“progress progress-striped”兩個類的基礎上再加入“active”類名即可。例如：
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width:40%"></div></div>
實現原理主要通過CSS3的animation來完成。首先通過@keyframes創建了一個progress-bar-stripes的動畫，這個動畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因為條紋進度條是通過CSS3的線性漸變來制作的，而linear-gradient實現的正是對應背景中的背景圖片。動畫的實現源碼如下：
@-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; }}調用動畫的實現源碼如下：
.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;}層疊進度條
層疊進度條可以將不同狀態的進度條放置在一起，按水平方式排列。例如：
<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>
我們可以發現，層疊進度條并沒有額外的樣式代碼，之所以這樣就能生效是因為在“progress-bar”上有一個左浮動的樣式。要注意，層疊進度條寬度之和不能大于100%。
帶Label的進度條
要實現帶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源碼學習筆記之bootstrap進度條，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
