App下載

bootstrap進度條怎么寫？有哪幾種進度條？

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

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

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

1.默認進度條

我們通過創(chuàng)建?.html?文件，在文件中加入 ?<div>?標簽在使用我們的類選擇器，代碼和運行結(jié)果如下：

<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 實例 - 進度條</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.交替進度條

按照我們創(chuàng)建的項目中添加我們的類選擇器名稱，代碼和運行結(jié)果如下：

<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 實例 - 交替的進度條</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% 完成（危險）</span>
	</div>
</div>
</body>
</html>

交替進度條

3.條紋進度條

我們通過在代碼中的類選擇器中加入?class .progress? 和? .progress-striped?，代碼和運行結(jié)果如下：

<html>
<head>
	<meta charset="utf-8"> 
    <title>Bootstrap 實例 - 條紋的進度條</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% 完成（危險）</span>
    </div>
</div>
</body>
</html>

條紋精度條

4.動畫進度條

我們在?.html?文件中的?<body>?標簽內(nèi)創(chuàng)建兩個?<div>?標簽并且設(shè)置類屬性名為?class .progress? 和 ?.progress-striped?，代碼和運行結(jié)果如下：

<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 實例 - 動畫的進度條</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.堆疊進度條

我們在通過對每個?<div>?標簽進行設(shè)置從而實現(xiàn)我們想要的效果，代碼和運行截圖如下：

<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 實例 - 堆疊的進度條</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進度條怎么寫？”這個問題小編的一些相關(guān)的內(nèi)容，當然如果你覺得你有更好的想法也可以和大家一起分享你的心得體會。當然更多有關(guān)于bootstrap相關(guān)的學習知識內(nèi)容我們都可以在Bootstrap 教程中進行學習和了解。


Bootstrap

0 人點贊