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

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

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

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

基本樣式

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

Bootstrap框架中也是按這樣的方式實(shí)現(xiàn)的，它提供了兩個容器，外容器使用“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;
}

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

無障礙性更好的寫法如下

<div class="progress">
    <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">40% Complete</span>
    </div>
</div>

role屬性告訴搜索引擎這個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%

彩色進(jìn)度條

Bootstrap框架中的進(jìn)度條和警告信息框一樣，為了能給用戶一個更好的體驗(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：表示錯誤進(jìn)度條，進(jìn)度條顏色為紅色

具體使用非常簡單，只需要在基礎(chǔ)的進(jìn)度上增加對應(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;
}

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

條紋進(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);
}

<div class="progress progress-striped">
    <div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

動態(tài)條紋

為了讓條紋進(jìn)度條動起來，Bootstrap框架還提供了一種動態(tài)條紋進(jìn)度條。其實(shí)現(xiàn)原理主要通過CSS3的animation來完成。首先通過@keyframes創(chuàng)建了一個progress-bar-stripes的動畫，這個動畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因?yàn)闂l紋進(jìn)度條是通過CSS3的線性漸變來制作的，而linear-gradient實(shí)現(xiàn)的正是對應(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”添加一個類名“active”，并讓文檔加載完成就觸“progress-bar-stripes”動畫生效，使其呈現(xiàn)出由右向左運(yùn)動的動畫效果

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

<div class="progress progress-striped active">
    <div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

層疊進(jìn)度條

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

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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

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

提示標(biāo)簽

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

<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

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

<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:1%">1%</div>
</div>
<div class="progress">
    <div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">1%</div>
</div>

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

文章標(biāo)題：Bootstrap中進(jìn)度條組件的示例分析
文章起源：http://muchs.cn/article6/ipisig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、品牌網(wǎng)站設(shè)計、App設(shè)計、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)