真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Bootstrap中進(jìn)度條組件的示例分析

這篇文章給大家分享的是有關(guān)Bootstrap中進(jìn)度條組件的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

雙臺(tái)子ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

在網(wǎng)頁中，進(jìn)度條的效果并不少見，比如一個(gè)評(píng)分系統(tǒng)，比如加載狀態(tài)等，通過簡(jiǎn)單、靈活的進(jìn)度條，可以為當(dāng)前工作流程或動(dòng)作提供實(shí)時(shí)反饋。下面我們來看看Bootstrap中的進(jìn)度條組件。

基本樣式

Bootstrap框架中對(duì)于進(jìn)度條提供了一個(gè)基本樣式，一個(gè)100%寬度的背景色，然后一個(gè)高亮的顏色表示完成進(jìn)度。其實(shí)制作這樣的進(jìn)度條非常容易，一般是使用兩個(gè)容器，外容器具有一定的寬度，并且設(shè)置一個(gè)背景顏色，子元素設(shè)置一個(gè)寬度，比如完成度是30%（也就是父容器的寬度比例值），同時(shí)給其設(shè)置一個(gè)高亮的背景色

Bootstrap框架中也是按這樣的方式實(shí)現(xiàn)的，它提供了兩個(gè)容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來設(shè)置進(jìn)度條的容器樣式，而progress-bar用于限制進(jìn)度條的進(jì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;
          transition: width .6s ease;
}

       

無障礙性更好的寫法如下


    
        40% Complete
    

role屬性告訴搜索引擎這個(gè)p的作用是進(jìn)度條；aria-valuenow="40"屬性告知當(dāng)前進(jìn)度條的進(jìn)度為40%；aria-valuemin="0"屬性告知進(jìn)度條的最小值為0%；aria-valuemax="100"屬性告知進(jìn)度條的最大值為100%

Bootstrap中進(jìn)度條組件的示例分析

彩色進(jìn)度條

Bootstrap框架中的進(jìn)度條和警告信息框一樣，為了能給用戶一個(gè)更好的體驗(yàn)，也根據(jù)不同的狀態(tài)配置了不同的進(jìn)度條顏色。在此稱為彩色進(jìn)度條，其主要包括以下四種：

? 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)度條顏色為紅色

具體使用非常簡(jiǎn)單，只需要在基礎(chǔ)的進(jìn)度上增加對(duì)應(yīng)的類名即可，彩色進(jìn)度條與基本進(jìn)度條相比，就是進(jì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;
}

    


    


    


    

Bootstrap中進(jìn)度條組件的示例分析

條紋進(jìn)度條

在Bootstrap框架中除了提供了彩色進(jìn)度條之外，還提供了一種條紋進(jìn)度條，這種條紋進(jìn)度條采用CSS3的線性漸變來實(shí)現(xiàn)，并未借助任何圖片。使用Bootstrap框架中的條紋進(jìn)度條只需要在進(jìn)度條的容器“progress”基礎(chǔ)上增加類名“progress-striped”，當(dāng)然，如果要讓進(jìn)度條條紋像彩色進(jìn)度一樣，具有彩色效果，只需要在進(jìn)度條上增加相應(yīng)的顏色類名

[注意]通過漸變可以為進(jìn)度條創(chuàng)建條紋效果，IE9-瀏覽器不支持

.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;
}
.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);
}

    


    


    


    


    

Bootstrap中進(jìn)度條組件的示例分析

動(dòng)態(tài)條紋

為了讓條紋進(jìn)度條動(dòng)起來，Bootstrap框架還提供了一種動(dòng)態(tài)條紋進(jìn)度條。其實(shí)現(xiàn)原理主要通過CSS3的animation來完成。首先通過@keyframes創(chuàng)建了一個(gè)progress-bar-stripes的動(dòng)畫，這個(gè)動(dòng)畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因?yàn)闂l紋進(jìn)度條是通過CSS3的線性漸變來制作的，而linear-gradient實(shí)現(xiàn)的正是對(duì)應(yīng)背景中的背景圖片

[注意]IE9-瀏覽器不支持

@-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;
  }
}

在Bootstrap框架中，通過給進(jìn)度條容器“progress”添加一個(gè)類名“active”，并讓文檔加載完成就觸“progress-bar-stripes”動(dòng)畫生效，使其呈現(xiàn)出由右向左運(yùn)動(dòng)的動(dòng)畫效果

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

    


    


    


    


    

Bootstrap中進(jìn)度條組件的示例分析

層疊進(jìn)度條

Bootstrap框架除了提供上述幾種進(jìn)度條之外，還提供了一種層疊進(jìn)度條。層疊進(jìn)度條可以將不同狀態(tài)的進(jìn)度條放置在一起，按水平方式排列

把多個(gè)進(jìn)度條放入同一個(gè) .progress 中，使它們呈現(xiàn)堆疊的效果


  
    35% Complete (success)
  
  
    20% Complete (warning)
  
  
    10% Complete (danger)
  

Bootstrap中進(jìn)度條組件的示例分析

[注意]層疊的進(jìn)度條之和不能大于100%


  
  
  

Bootstrap中進(jìn)度條組件的示例分析

提示標(biāo)簽

在實(shí)際開發(fā)中，有很多時(shí)候是需要在進(jìn)度條中直接用相關(guān)的數(shù)值向用戶傳遞完成的進(jìn)度值，Bootstrap考慮了這種使用場(chǎng)景，只需要在進(jìn)度條中添加需要的值


    20%

Bootstrap中進(jìn)度條組件的示例分析

在展示很低的百分比時(shí)，如果需要讓文本提示能夠清晰可見，可以為進(jìn)度條設(shè)置 min-width 屬性


    0%


    0%


    1%


    1%

Bootstrap中進(jìn)度條組件的示例分析

感謝各位的閱讀！關(guān)于“Bootstrap中進(jìn)度條組件的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！


新聞標(biāo)題：Bootstrap中進(jìn)度條組件的示例分析
網(wǎng)頁URL：http://weahome.cn/article/ipisig.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部