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

猿友 2021-06-17 14:47:09 瀏覽數 (2974)

反饋

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

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

1.默認進度條

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

<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)建的項目中添加我們的類選擇器名稱，代碼和運行結果如下：

<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?，代碼和運行結果如下：

<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>?標簽內創(chuàng)建兩個?<div>?標簽并且設置類屬性名為?class .progress? 和 ?.progress-striped?，代碼和運行結果如下：

<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>?標簽進行設置從而實現我們想要的效果，代碼和運行截圖如下：

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

堆疊進度條

總結：

這就是有關于：“bootstrap進度條怎么寫？”這個問題小編的一些相關的內容，當然如果你覺得你有更好的想法也可以和大家一起分享你的心得體會。當然更多有關于bootstrap相關的學習知識內容我們都可以在Bootstrap 教程中進行學習和了解。

Bootstrap

0 人點贊

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

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