Bootstrap源碼學(xué)習(xí)筆記之bootstrap進(jìn)度條

更新時(shí)間：2016年12月24日 09:30:04 作者：藝術(shù)就是爆炸

本文通過(guò)源碼給大家解析bootstrap進(jìn)度條樣式，分為條紋進(jìn)度條，動(dòng)態(tài)條紋進(jìn)度條，層疊進(jìn)度條和帶Label的進(jìn)度條，下面通過(guò)代碼給大家簡(jiǎ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)度條的背景顏色和過(guò)渡效果。實(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)的類(lèi)名即可：

.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ǔ)上增加類(lèi)名“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è)類(lèi)的基礎(chǔ)上再加入“active”類(lèi)名即可。例如：

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

實(shí)現(xiàn)原理主要通過(guò)CSS3的animation來(lái)完成。首先通過(guò)@keyframes創(chuàng)建了一個(gè)progress-bar-stripes的動(dòng)畫(huà)，這個(gè)動(dòng)畫(huà)主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因?yàn)闂l紋進(jìn)度條是通過(guò)CSS3的線性漸變來(lái)制作的，而linear-gradient實(shí)現(xiàn)的正是對(duì)應(yīng)背景中的背景圖片。動(dòng)畫(huà)的實(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)畫(huà)的實(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)度條并沒(méi)有額外的樣式代碼，之所以這樣就能生效是因?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í)，可以這么寫(xiě)：

<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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: