溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“bootstrap進(jìn)度條如何寫”，在日常操作中，相信很多人在bootstrap進(jìn)度條如何寫問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”bootstrap進(jìn)度條如何寫”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
bootstrap進(jìn)度條是使用 CSS3 過度和動(dòng)畫來(lái)實(shí)現(xiàn)的效果，而且在 IE9 以及之前的版本還有舊版的 Firefox 也不支持這個(gè)特性，然而Opera12不支持動(dòng)畫。
1.默認(rèn)進(jìn)度條
我們通過創(chuàng)建.html文件，在文件中加入 <div>標(biāo)簽在使用我們的類選擇器，代碼和運(yùn)行結(jié)果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 進(jìn)度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="progress" >
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" >
<span class="sr-only">40% 完成</span>
</div>
</div>
</body>
</html>2.交替進(jìn)度條
按照我們創(chuàng)建的項(xiàng)目中添加我們的類選擇器名稱，代碼和運(yùn)行結(jié)果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 交替的進(jìn)度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">90% 完成（成功）</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">30% 完成（信息）</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">20% 完成（警告）</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">10% 完成（危險(xiǎn)）</span>
</div>
</div>
</body>
</html>3.條紋進(jìn)度條
我們通過在代碼中的類選擇器中加入class .progress 和 .progress-striped，代碼和運(yùn)行結(jié)果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 條紋的進(jìn)度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">90% 完成（成功）</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">30% 完成（信息）</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">20% 完成（警告）</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">10% 完成（危險(xiǎn)）</span>
</div>
</div>
</body>
</html>4.動(dòng)畫進(jìn)度條
我們?cè)?code>.html文件中的<body>標(biāo)簽內(nèi)創(chuàng)建兩個(gè)<div>標(biāo)簽并且設(shè)置類屬性名為class .progress 和 .progress-striped，代碼和運(yùn)行結(jié)果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 動(dòng)畫的進(jìn)度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">40% 完成</span>
</div>
</div>
</body>
</html>
5.堆疊進(jìn)度條
我們?cè)谕ㄟ^對(duì)每個(gè)<div>標(biāo)簽進(jìn)行設(shè)置從而實(shí)現(xiàn)我們想要的效果，代碼和運(yùn)行截圖如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 堆疊的進(jìn)度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">40% 完成</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">30% 完成（信息）</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">20% 完成（警告）</span>
</div>
</div>
</body>
</html>到此，關(guān)于“bootstrap進(jìn)度條如何寫”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼