Bootstrap進度條學習使用
更新時間：2017年02月09日 09:30:13 作者：輕擾時光
這篇文章主要為大家詳細介紹了Bootstrap進度條的學習使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Bootstrap進度條的具體實現代碼，供大家參考，具體內容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
<div class="container">
<div class="row">
<div class="progress"><!--進度條-->
<div class="progress-bar" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:40%">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:80%">80%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:75%">75%</div>
</div>
<!--帶條紋的動態(tài)的進度條-->
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width:68%">68%</div>
</div>
<!--帶堆疊效果的進度條-->
<div class="progress">
<div class="progress-bar" style="width:10%">10%</div>
<div class="progress-bar progress-bar-danger" style="width:10%">40%</div>
<div class="progress-bar progress-bar-info" style="width:20%">80%</div>
<div class="progress-bar progress-bar-warning" style="width:30%">75%</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width:20%">20%</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
js操作時間（年-月-日 時-分-秒 星期幾）,需要的朋友可以參考下。2010-06-06
這篇文章主要介紹了JavaScript設計模式之適配器模式，對設計模式不熟悉的同學，可以參考學習一下2021-04-04
本文主要介紹了js異步之async和await實現同步寫法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要是對JavaScript中的變量作用域進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了原生JS實現鼠標滑動撒愛心特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
農歷是日常生活中不可或缺的一部分，它與人類的生活息息相關，從某種程度上說，它一直伴隨著我們，今天的任務是JavaScript轉換農歷類的實現，感興趣的你可以千萬不要錯過，希望本文對你有所幫助2013-01-01
這篇文章主要介紹了javascript 彈出的窗口返回值給父窗口具體實現，有需要的朋友可以參考一下2013-11-11
當我們談論面向對象編程時,最難理解的事情之一就是靜態(tài)屬性與實例屬性的概念,尤其是當我們試圖在靜態(tài)類型的基礎上進行動態(tài)語言類型化時,在本文中,我將主要介紹一下如何使用TypeScript在接口中定義靜態(tài)方法,需要的朋友可以參考下2023-10-10
微信頁面開發(fā)時，各個主頁之間的跳轉，完全是通過a鏈接進行的，但是來回跳轉幾次，再次從其他主頁面跳回首頁的時候，微信頭部出現了跳轉加載進度條，但是就是不跳轉，也沒有任何反應，怎么回事呢？下面小編給大家解答下2016-08-08
這篇文章介紹了JavaScript獲取FCK編輯器信息的實例代碼，有需要的朋友可以參考一下2013-07-07