首頁 > 文章 > web前端 > 詳解Bootstrap中的進度條組件

詳解Bootstrap中的進度條組件

青灯夜游轉載: 2021-04-08 11:30:232891瀏覽

本篇文章為大家詳細介紹Bootstrap中的進度條組件。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

詳解Bootstrap中的進度條組件

在網頁中，進度條的效果並不少見，例如一個評分系統，例如載入狀態等，透過簡單、靈活的進度條，可以為目前工作流程或動作提供即時回饋。下面我們來看看Bootstrap中的進度條元件。

#基本樣式

Bootstrap框架中對於進度條提供了一個基本樣式，一個100%寬度的背景色，然後一個高亮的顏色表示完成進度。其實製作這樣的進度條非常容易，通常是使用兩個容器，外容器有一定的寬度，並且設定一個背景顏色，子元素設定一個寬度，例如完成度是30%（也就是父容器的寬度比例值），同時給其設定一個高亮的背景色

Bootstrap框架中也是按這樣的方式實現的，它提供了兩個容器，外容器使用“progress”樣式，子容器使用“progress- bar”樣式。其中progress用來設定進度條的容器樣式，而progress-bar用來限制進度條的進度

.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>
    <div>
        <span>40% Complete</span>
    </div>
</div>

role屬性告訴搜尋引擎這個p的作用是進度條；aria-valuenow="40"屬性告知當前進度條的進度為40%；aria-valuemin="0"屬性告知進度條的最小值為0%；aria-valuemax="100"屬性告知進度條的最大值為100%

詳解Bootstrap中的進度條組件

彩色進度條

Bootstrap框架中的進度條和警告訊息框一樣，為了能給使用者一個更好的體驗，也根據不同的狀態配置了不同的進度條顏色。在此稱為彩色進度條，其主要包括以下四種：

☑ progress-bar-info：表示資訊進度條，進度條顏色為藍色

☑ progress-bar- success：表示成功進度條，進度條顏色為綠色

☑ progress-bar-warning：表示警告進度條，進度條顏色為黃色

☑ progress-bar-danger：表示錯誤進度條，進度條顏色為紅色

具體使用非常簡單，只需要在基礎的進度上增加對應的類別名稱即可，彩色進度條與基本進度條相比，就是進度條顏色做了一定的變化

.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>
    <div></div>
</div>
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>

詳解Bootstrap中的進度條組件

條紋進度條

在Bootstrap框架中除了提供了彩色進度條之外，還提供了一種條紋進度條，這種條紋進度條採用CSS3的線性漸進來實現，並未藉助任何圖片。使用Bootstrap框架中的條紋進度條只需要在進度條的容器“progress”基礎上增加類別名稱“progress-striped”，當然，如果要讓進度條條紋像彩色進度一樣，具有彩色效果，只需要在進度條上增加對應的顏色類別名稱

[注意]透過漸層可以為進度條建立條紋效果，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>

詳解Bootstrap中的進度條組件

動態條紋

為了讓條紋進度條動起來，Bootstrap框架也提供了一種動態條紋進度條。其實現原理主要透過CSS3的animation來完成。首先透過@keyframes創造了一個progress-bar-stripes的動畫，這個動畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因為條紋進度條是透過CSS3的線性漸進來製作的，而linear-gradient實現的正是對應背景中的背景圖片

#[注意]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框架中，透過為進度條容器“progress”添加一個類別名稱“active”，並讓文件載入完成就觸“progress-bar-stripes”動畫生效，使其呈現出由右向左運動的動畫效果

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

<div>
    <div></div>
</div>
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>

詳解Bootstrap中的進度條組件

層疊進度條

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

把多個進度條放入同一個 .progress 中，使它們呈現堆疊的效果

<div>
  <div>
    <span>35% Complete (success)</span>
  </div>
  <div>
    <span>20% Complete (warning)</span>
  </div>
  <div>
    <span>10% Complete (danger)</span>
  </div>
</div>

詳解Bootstrap中的進度條組件

[注意]層疊的進度條總和不能大於100%

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

詳解Bootstrap中的進度條組件

提示标签

在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值

<div>
    <div>20%</div>
</div>

詳解Bootstrap中的進度條組件

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性

<div>
    <div>0%</div>
</div>
<div>
    <div>0%</div>
</div>
<div>
    <div>1%</div>
</div>
<div>
    <div>1%</div>
</div>

詳解Bootstrap中的進度條組件

更多编程相关知识，请访问：编程视频！！

以上是詳解Bootstrap中的進度條組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

bootstrap css3 堆 position background animation 搜索引擎

陳述：

本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：詳解bootstrap自訂側邊導覽列的方法下一篇：詳解bootstrap自訂側邊導覽列的方法

看更多