溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)bootstrap中怎么設(shè)置進度條，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
1、實現(xiàn)方法如下：
(1)引入bootrap文件：
<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
(2)添加一個<div class="progress">；
(3)在<div class="progress">中添加一個<div class="progress-bar">
<div class="progress-bar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;">
aria-valuenow="40"——進度條目前進度值。
aria-valuemax="100"——最大進度值。
aria-valuemin=“0”——最小進度值。
style="width:40%;"——讓進度條指在40%的位置。
完整代碼如下：
<!doctype html><html><head> <meta charset="UTF-8"> <title>進度條</title> <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css"></head><body><div style="width: 600px"> <p>默認(rèn)的進度條</p> <div> <div aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;"> </div> </div></div></body></html>
2、指定顏色.
progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger
<div class="progress"> <div class="progress-bar progress-bar-success"style="width: 90%;"> </div></div><div class="progress"> <div class="progress-bar progress-bar-info" style="width: 30%;"> </div></div><div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 20%;"> </div></div><div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 10%;"> </div></div>
3、條紋狀，通過在根div添加 progress-striped 即可
<div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width: 90%;"> </div> </div>
4、在根div 添加active，即可實現(xiàn)帶動畫的進度條。
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width: 40%;"> </div> </div>
看完上述內(nèi)容，你們對bootstrap中怎么設(shè)置進度條有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
