免費(fèi)AI編程助手
今天我們來(lái)說(shuō)說(shuō)有關(guān)于：“bootstrap進(jìn)度條怎么寫(xiě)？”這個(gè)問(wèn)題，小編從網(wǎng)上找到了相關(guān)的一些關(guān)于Bootstrap進(jìn)度條的資料大家可以作為參考和學(xué)習(xí)。
bootstrap進(jìn)度條是使用 CSS3 過(guò)度和動(dòng)畫(huà)來(lái)實(shí)現(xiàn)的效果，而且在 IE9 以及之前的版本還有舊版的 Firefox 也不支持這個(gè)特性，然而Opera12不支持動(dòng)畫(huà)。那么接下來(lái)我們來(lái)看看有哪幾種進(jìn)度條設(shè)計(jì)方案吧！
1.默認(rèn)進(jìn)度條我們通過(guò)創(chuàng)建?.html?文件，在文件中加入 ?<div>?標(biāo)簽在使用我們的類(lèi)選擇器，代碼和運(yùn)行結(jié)果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 進(jìn)度條</title>
<link rel="stylesheet" >
<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" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
</body>
</html>
2.交替進(jìn)度條
按照我們創(chuàng)建的項(xiàng)目中添加我們的類(lèi)選擇器名稱，代碼和運(yùn)行結(jié)果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 交替的進(jìn)度條</title>
<link rel="stylesheet" >
<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"
style="width: 90%;">
<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"
style="width: 30%;">
<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"
style="width: 20%;">
<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"
style="width: 10%;">
<span class="sr-only">10% 完成（危險(xiǎn)）</span>
</div>
</div>
</body>
</html>
3.條紋進(jìn)度條
我們通過(guò)在代碼中的類(lèi)選擇器中加入?class .progress? 和? .progress-striped?，代碼和運(yùn)行結(jié)果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 條紋的進(jìn)度條</title>
<link rel="stylesheet" >
<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"
style="width: 90%;">
<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"
style="width: 30%;">
<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"
style="width: 20%;">
<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"
style="width: 10%;">
<span class="sr-only">10% 完成（危險(xiǎn)）</span>
</div>
</div>
</body>
</html>
4.動(dòng)畫(huà)進(jìn)度條
我們?cè)?.html?文件中的?<body>?標(biāo)簽內(nèi)創(chuàng)建兩個(gè)?<div>?標(biāo)簽并且設(shè)置類(lèi)屬性名為?class .progress? 和 ?.progress-striped?，代碼和運(yùn)行結(jié)果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實(shí)例 - 動(dòng)畫(huà)的進(jìn)度條</title>
<link rel="stylesheet" >
<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"
style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
</body>
</html>
5.堆疊進(jìn)度條
我們?cè)谕ㄟ^(guò)對(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" >
<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"
style="width: 40%;">
<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"
style="width: 30%;">
<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"
style="width: 20%;">
<span class="sr-only">20% 完成（警告）</span>
</div>
</div>
</body>
</html>
總結(jié)：
這就是有關(guān)于：“bootstrap進(jìn)度條怎么寫(xiě)？”這個(gè)問(wèn)題小編的一些相關(guān)的內(nèi)容，當(dāng)然如果你覺(jué)得你有更好的想法也可以和大家一起分享你的心得體會(huì)。當(dāng)然更多有關(guān)于bootstrap相關(guān)的學(xué)習(xí)知識(shí)內(nèi)容我們都可以在Bootstrap 教程中進(jìn)行學(xué)習(xí)和了解。
