詳解Bootstrap進度條組件

来源:http://www.cnblogs.com/jnslove/archive/2016/04/29/5447074.html
-Advertisement-
Play Games

在網頁中,進度條的效果並不少見,如:平分系統、載入狀態等,進度條組件使用了css3的transition和animation屬性來完成一些特效,這些特效在IE9及IE9以下版本、Firefox的老版本中並不支持,Opera 12 不支持 animation 屬性。 進度條和其他獨立組件一樣,開發者可... ...


在網頁中,進度條的效果並不少見,如:平分系統、載入狀態等,進度條組件使用了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>
image

role屬性作用:告訴搜索引擎這個div的作用是進度條;

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

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

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

可以將設置了.sr-only類的<span>標簽從進度條組件中移除,而讓當前進度顯示出來;

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

 

彩色進度條

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

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>

效果如下:

image

 

條紋進度條

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

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

下麵來看看條紋進度條的運用:

<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>
image

 

動態條紋進度條

在進度條.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>

效果如下(由於是直接從網頁上結果來的圖,這裡並看不到它的動態效果):

 

image

 

層疊進度條:

層疊進度可以將不容狀態的進度條放在一起,按水平方式排列

例子:

<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>
image

除了層疊彩色進度條之外,還可以層疊條紋進度條,或者說條紋進度條和彩色進度條混合層疊,僅需要在“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>
image
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 學習要點: 1.選擇器總匯 2.基本選擇器 3.複合選擇器 4.偽元素選擇器 主講教師:李炎恢 本章主要探討 HTML5 中 CSS 選擇器,通過選擇器定位到想要設置樣式的元素。目前 CSS 選擇器的版本已經升級至第三代,即 CSS3 選擇器。CSS3 選擇器提供了更多、更豐富的選擇器方式,主要分為 ...
  • Atitit.隔行換色 變色 css3 結構性偽類選擇器 1.1. css3隔行換色擴展閱讀 1 1.2. 結構偽選擇器 1 1.3. jQuery 選擇器2 1.1. css3隔行換色擴展閱讀 原理就是利用結構偽類選擇器 .list_div tr:nth-of-type(odd){backgrou ...
  • Atitit.jpg png格式差別以及解決jpg圖片不顯示的問題 圖片在pc上可以顯示,在Android上不能,img以及背景都不能顯示。。 Psd文件不能保存為png格式,只能jpg 原來是jpg文件是cmyk格式的。To rbg then nonk 作者:: ★(attilax)>>> 綽號: ...
  • 效果體驗:http://hovertree.com/texiao/jqimg/1/效果圖:代碼如下: 源碼下載:http://hovertree.com/h/bjaf/ljn1fwka.htm 轉自:http://hovertree.com/h/bjaf/flurt6nt.htm 特效庫:http: ...
  • ...
  • Bootstrap輸入框組 主要記住一個原則 創建輸入框的步驟 把首碼或尾碼元素放在一個帶有 class .input-group 的 <div> 中。 接著,在相同的 <div> 內,在 class 為 .input-group-addon 的 <span> 內放置額外的內容。 把該 <span> ...
  • 一、最終效果 需求:gift圖片的小動畫每隔2s執行一次。 需求就一句話,我們看一下實現過程。 二、實現過程 1、網頁結構 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> < ...
  • github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜單 html下拉菜單select在安卓和IOS下表現不一樣,iosselect正是為統一下拉菜單樣式而生 我們以IOS下select的交互和樣式為藍本,開發了這一組件 先看 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...