相關推薦:《bootstrap教學》
在網頁中,進度條的效果並不少見,如:平分系統、載入狀態等等,進度條元件使用了css3的transition和animation屬性來完成一些特效,這些特效在IE9及IE9以下版本、Firefox的老版本中並不支持,Opera 12 不支援animation 屬性。
進度條和其他獨立元件一樣,開發者可以根據自己的需求選擇對應的版本:
LESS: progress-bars.less
SASS: _progress-bars .scss
基礎進度條
#實作原理:
##需要兩個容器,外容器使用類別名稱.progress,子容器使用類別名稱.progress-bar;其中.progress用來設定進度條容器的背景色,容器的高度,間距等;而.progress-bar設定進度方向,進度條的背景色彩和過度效果;以下是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屬性作用:告訴搜尋引擎這個p的作用是進度條;
aria-valuenow=”30”屬性作用:當前進度條的進度為40%;
aria-valuemin=”0”屬性作用:進度條的最小值為0%;
aria-valuemax=”100”屬性作用:進度條的最大值為100%;
可以設定了.sr-only類別的 彩色進度條和警告進度條一樣,為了能給用戶一個更好的體驗,也根據不同的狀態配置了不同的進度條顏色,主要包括以下四種: progress-bar-info:表示訊息進度條,藍色 progress-bar-success:表示成功進度條,綠色 progress-bar-warning:表示警告進度條,黃色 progress-bar -danger:表示錯誤進度條,紅色 css原始碼: 使用方法: #只需要在基礎進度條上增加對應的類別名稱即可 範例: 效果如下: #條紋進度條條紋進度條採用css3的線性漸進來實現,並未借助任何圖片,使用條紋進度條只需在進度條的容器.progress基礎上追加類名”progress-striped”,如果要進度條紋像彩色進度一樣,具有彩色效果,只需在進度條上增加相應得顏色類別名稱 下面是.progress-striped樣式源碼: 條紋進度對應的每種狀態也有不同的顏色 下面來看看條紋進度條的運用: 動態條紋進度條 #在進度條.progress 、.progress-striped兩個類別的基礎上在加入類別名稱.active就能實現動態條紋進度條。 其實現原理主要是透過css3的animation來完成。首先透過@keyframes創造了一個progress-bar-stripes的動畫,這個動畫主要做了一件事,就是改變背景圖像的位置,也就是 background-position的值。因為條紋進度條是透過CSS3的線性漸進式來製作的,而linear-gradient實現的正是對應背景中的背景圖片 #下面是css源碼: #@keyframes只是創建了一個動畫效果,如果要讓進度條真正的動起來,我們需要通過一定的方式調用@keyframes創建的動畫“progress-bar-stripes”,並且通過一個事件觸發動畫生效。在Bootstrap框架中,透過為進度條容器“progress”添加一個類別名稱“active”,並讓文件載入完成就觸“progress-bar-stripes”動畫生效 呼叫動畫對應的樣式程式碼如下: 範例: 效果如下(由于是直接从网页上结果来的图,这里并看不到它的动态效果): 层叠进度条: 层叠进度可以将不容状态的进度条放在一起,按水平方式排列 例子: 除了层叠彩色进度条之外,还可以层叠条纹进度条,或者说条纹进度条和彩色进度条混合层叠,仅需要在“progress”容器中添加对应的进度条,同样要注意,层叠的进度条之和不能大于100%。 下面来看一个例子:<div class="progress">
<div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >40%</div>
</div>
.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}
<h1>彩色进度条</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>
.progress-striped .progress-bar {
background-深入了解Bootstrap中的進度條組件: -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-深入了解Bootstrap中的進度條組件: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;
}
.progress-striped .progress-bar-success {
background-深入了解Bootstrap中的進度條組件: -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-深入了解Bootstrap中的進度條組件: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-深入了解Bootstrap中的進度條組件: -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-深入了解Bootstrap中的進度條組件: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-深入了解Bootstrap中的進度條組件: -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-深入了解Bootstrap中的進度條組件: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-深入了解Bootstrap中的進度條組件: -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-深入了解Bootstrap中的進度條組件: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);
}
<h1>条纹进度条</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>
@-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;
}
}
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
<h1>动态条纹进度条</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>
<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>
<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>
更多编程相关知识,请访问:编程视频!!
以上是深入了解Bootstrap中的進度條組件的詳細內容。更多資訊請關注PHP中文網其他相關文章!