Bootstrap 3 進度條的實現(xiàn)
更新時間：2017年02月22日 10:35:30 作者：qq1214379009
這篇文章主要介紹了Bootstrap 3 進度條的實現(xiàn),非常不錯，具有參考借鑒價值，需要的朋友可以參考下
基本樣式
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div>
自帶進度
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div>
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"> 2% </div> </div>
多種顏色
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div>
條紋
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div>
動態(tài)
<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div>
堆疊
<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>
以上所述是小編給大家介紹的Bootstrap 3 進度條的實現(xiàn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了js拖拽的原型聲明和用法總結(jié)，感興趣的朋友可以參考一下2016-04-04
DOM是W3C制定的用于訪問諸如XML和XHTML等結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)。通過本文給大家介紹JavaScript利用HTML DOM進行文檔操作的方法，需要的朋友參考下吧2016-03-03
這篇文章主要介紹了HTML5實現(xiàn)微信拍攝上傳照片功能，實現(xiàn)HTML5 Canvas手機拍攝，本地壓縮上傳圖片時遇到問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
layui table去掉右側(cè)滑動條的實現(xiàn)方法
今天小編就為大家分享一篇layui table去掉右側(cè)滑動條的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了微信小程序表單驗證功能,結(jié)合完整實例形式分析了微信小程序完成表單驗證功能所涉及的視圖與邏輯操作技巧,需要的朋友可以參考下2017-12-12
數(shù)組對象自帶方法想必大家都有所耳聞,今天主要為大家介紹下JavaScript中數(shù)組對象的那些自帶方法，感興趣的你可以參考下哈，希望可以幫助你學(xué)習(xí)javascript2013-03-03
學(xué)習(xí)JavaScript設(shè)計模式之觀察者模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的觀察者模式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
本篇文章主要是對js獲取當(dāng)前頁面路徑的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JS中Generator函數(shù)與async函數(shù)用法介紹
javascript中經(jīng)常會用到異步編程，在ES6之后我們使用的?Generator函數(shù)、async函數(shù)、promise都是我們異步編程的一大助力，這里我們主要講解Generator、async函數(shù)，并且簡介他們之間的一些聯(lián)系，本篇文章會帶著一些簡易案例，方便大家理解使用2023-06-06
javascript實現(xiàn)右側(cè)彈出“分享到”窗口效果
這篇文章主要為大家介紹了javascript實現(xiàn)右側(cè)彈出“分享到”窗口效果，以一個完整的js右側(cè)彈出“分享到”窗口的實例代碼進行分析，感興趣的小伙伴們可以參考一下2016-02-02