伊人亚洲一区二区不卡,久草香蕉影视中文

進度條

在網頁中，進度條的效果并不少見，比如一個評分系統，比如加載狀態等。就如下圖所示的一個評分系統，他就是一個簡單的進度條效果：

進度條和其他獨立組件一樣，開發者可以根據自己的需要，選擇對應的版本：

? LESS版本：源碼文件progress-bars.less

? Sass版本：源碼文件_progress-bars.scss

? 編譯后版本：bootstrap.css文件第4500行～第4575行

而且Bootstrap框架為大家提供多種樣式風格的進度條，供大家使用(見右側代碼編輯器)，這一小節只是給大家直觀上展示了這些進度條樣式，接下來幾個小節中，我們將詳細講解這些進度條如何使用。

任務

?不會了怎么辦

index.html

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>進度條--基本樣式</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <h2>基本進度條</h2> <div class="progress"> <div class="progress-bar" style="width:40%"> </div> </div> <h2>彩色進度條</h2> <div class="progress"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" style="width:60%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width:80%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width:50%"></div> </div> <h2>條紋進度條</h2> <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> <h2>動態條紋進度條</h2> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width:60%"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" style="width:80%"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" style="width:50%"></div> </div> <h2>層疊進度條</h2> <h5>正常層疊進度條</h5> <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> <h5>不良效果層疊進度條</h5> <div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%"></div> <div class="progress-bar progress-bar-info" style="width:40%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger" style="width:45%"></div> </div> <h5>層疊條紋進度條</h5> <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> <h2>帶Label的進度條</h2> <h5>進度條1</h5> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">70%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div> </div> <h5>進度條2</h5> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> </div> <script src="http://www.xianlaiwan.cn/static/lib/jquery/1.9.1/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

7-7 進度條

進度條

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

7-7 進度條

熱搜

最近搜索清空

進度條

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～