日本一高清二区视频久二区,国产99久久久久久免费看,欧美老妇视频在线视频

今天給大家分享一個(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>

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>

彩色進(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)的類名即可

例子：

</div>

</div>

</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);