社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > Bootstrap教程 > 主體

深入了解Bootstrap中的進度條組件

青灯夜游
發布： 2021-02-23 17:45:18
轉載
2351 人瀏覽過

深入了解Bootstrap中的進度條組件

相關推薦：《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>
登入後複製

深入了解Bootstrap中的進度條組件##role屬性作用：告訴搜尋引擎這個p的作用是進度條；

aria-valuenow=”30”屬性作用：當前進度條的進度為40%；

aria-valuemin=”0”屬性作用：進度條的最小值為0%；

aria-valuemax=”100”屬性作用：進度條的最大值為100%；

可以設定了.sr-only類別的

<div class="progress">
        <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >40%</div>
    </div>
登入後複製

深入了解Bootstrap中的進度條組件

#彩色進度條

彩色進度條和警告進度條一樣，為了能給用戶一個更好的體驗，也根據不同的狀態配置了不同的進度條顏色，主要包括以下四種：

progress-bar-info:表示訊息進度條，藍色

progress-bar-success:表示成功進度條，綠色

progress-bar-warning:表示警告進度條，黃色

progress-bar -danger:表示錯誤進度條，紅色

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;
}
登入後複製

使用方法：

#只需要在基礎進度條上增加對應的類別名稱即可

範例：

<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>
登入後複製

效果如下：

深入了解Bootstrap中的進度條組件

#條紋進度條條紋進度條採用css3的線性漸進來實現，並未借助任何圖片，使用條紋進度條只需在進度條的容器.progress基礎上追加類名”progress-striped”,如果要進度條紋像彩色進度一樣，具有彩色效果，只需在進度條上增加相應得顏色類別名稱

下面是.progress-striped樣式源碼：

.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>
登入後複製

深入了解Bootstrap中的進度條組件

動態條紋進度條

#在進度條.progress 、.progress-striped兩個類別的基礎上在加入類別名稱.active就能實現動態條紋進度條。

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

#下面是css源碼：

@-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;
  }
}
登入後複製

#@keyframes只是創建了一個動畫效果，如果要讓進度條真正的動起來，我們需要通過一定的方式調用@keyframes創建的動畫“progress-bar-stripes”，並且通過一個事件觸發動畫生效。在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;
}
登入後複製

範例：

<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>
登入後複製

效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：

深入了解Bootstrap中的進度條組件

层叠进度条：

层叠进度可以将不容状态的进度条放在一起，按水平方式排列

例子：

<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>
登入後複製

深入了解Bootstrap中的進度條組件

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。

下面来看一个例子：

<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中的進度條組件

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

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

相關標籤：
bootstrap 進度條組件
來源：cnblogs.com
上一篇：深入了解Bootstrap中的媒體對象 下一篇：Bootstrap學習之縮圖組件與警示框組件的使用
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...
來自於 2024-04-06 20:22:15
0
1
454
使用「折疊顯示器」類別自訂 Bootstrap 手風琴標題的外觀 我想設定具有類別collapseshow的面板的卡片標題樣式。在此範例中，它是第一個面板。我嘗試使用CSS來使用.accordion.card.card-headerbutton....
來自於 2024-04-06 12:53:11
0
1
376
Web頁面調整大小時，Bootstrap開關無法正常運作 這是程式碼：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&q...
來自於 2024-04-05 08:45:39
0
1
3443
在Laravel中以Bootstrap模式展示AWS PDF文件 我已經下載了awsurl，例如https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/655712202215174539...
來自於 2024-04-04 22:16:18
0
1
1450
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板