歡迎加入QQ討論群258996829
蘋果6袋
麥子學(xué)院
Bootstrap進(jìn)度條組件學(xué)習(xí)教程
發(fā)布時(shí)間：2016-07-03 00:03 回復(fù):0 查看:2485 最后回復(fù)：2016-07-03 00:03
今天給大家分享一個(gè)
Bootstrap
教程http://www.maiziedu.com/course/543/，是關(guān)于進(jìn)度條組件的。眾所周知，在網(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è)
div
的作用是進(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)的類名即可
例子：
<h1>
彩色進(jìn)度條
</h1>
<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)用：
<h1>
條紋進(jìn)度條
</h1>
<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>
動態(tài)條紋進(jìn)度條
在進(jìn)度條
.progress
、
.progress-striped
兩個(gè)類的基礎(chǔ)上在加入類名
.active
就能實(shí)現(xiàn)動態(tài)條紋進(jìn)度條。
其實(shí)現(xiàn)原理主要是通過
css3
的
animation
來完成。首先通過
@keyframes
創(chuàng)建了一個(gè)
progress-bar-stripes
的動畫，這個(gè)動畫主要做了一件事，就是改變背景圖像的位置，也就是
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è)動畫效果，如果要讓進(jìn)度條真正的動起來，我們需要通過一定的方式調(diào)用
@keyframes
創(chuàng)建的動畫
“progress-bar-stripes”
，并且通過一個(gè)事件觸發(fā)動畫生效。在
Bootstrap
框架中，通過給進(jìn)度條容器
“progress”
添加一個(gè)類名
“active”
，并讓文檔加載完成就觸
“progress-bar-stripes”
動畫生效
調(diào)用動畫對應(yīng)的樣式代碼如下：
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
例子：
<h1>
動態(tài)條紋進(jìn)度條
</h1>
<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é)果來的圖，這里并看不到它的動態(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>
原文來自：博客園
您還未登錄，請先登錄
熱門帖子
- iDev 全平臺開發(fā)者大會門票免費(fèi)送！限量10張！
- 蘋果Mac Pro垃圾桶 最低配的ME253CH
- 本人想買個(gè)蘋果電腦搞開發(fā)，哪位大俠指點(diǎn)下
- 求助：failable initializer 'init(name:)' cannot override a non-failable initializer
- 為慶祝Swift發(fā)布1個(gè)月，雨燕社區(qū)正式上線。
- 在UITextFeild里輸入數(shù)據(jù)，這個(gè)數(shù)據(jù)怎么做加減乘除？
- Swift 高仿喜馬拉雅FM
- 要成為自由職業(yè)者？先要學(xué)會蘋果的Swift哦
- 用swift實(shí)現(xiàn)的調(diào)用系統(tǒng)相機(jī)，相冊的DEMO
- 關(guān)于嵌入式引用\()