App下載

bootstrap進(jìn)度條怎么寫？有哪幾種進(jìn)度條？

猿友 2021-06-17 14:47:09 瀏覽數(shù) (2975)
反饋

今天我們來說說有關(guān)于：“bootstrap進(jìn)度條怎么寫？”這個(gè)問題，小編從網(wǎng)上找到了相關(guān)的一些關(guān)于Bootstrap進(jìn)度條的資料大家可以作為參考和學(xué)習(xí)。

bootstrap進(jìn)度條是使用 CSS3 過度和動(dòng)畫來實(shí)現(xiàn)的效果，而且在 IE9 以及之前的版本還有舊版的 Firefox 也不支持這個(gè)特性，然而Opera12不支持動(dòng)畫。那么接下來我們來看看有哪幾種進(jìn)度條設(shè)計(jì)方案吧！

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" >
	<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>

默認(rèn)進(jìn)度條

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" >
	<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>

交替進(jìn)度條

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" >
	<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)畫進(jìn)度條

我們?cè)?.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" >
	<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è)谕ㄟ^對(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>

堆疊進(jìn)度條


總結(jié)：

這就是有關(guān)于：“bootstrap進(jìn)度條怎么寫？”這個(gè)問題小編的一些相關(guān)的內(nèi)容，當(dāng)然如果你覺得你有更好的想法也可以和大家一起分享你的心得體會(huì)。當(dāng)然更多有關(guān)于bootstrap相關(guān)的學(xué)習(xí)知識(shí)內(nèi)容我們都可以在Bootstrap 教程中進(jìn)行學(xué)習(xí)和了解。


Bootstrap

0 人點(diǎn)贊