<div>中通过使用.progress样式实现进度条<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> <span class="sr-only">70% Complete</span> </div> </div>进度条可以有标签
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% </div> </div>- 可选颜色
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
- 可以有条纹
.progress-bar-striped - 可以有动画效果
.active，为了实现动画效果必须带.progress-bar-striped 进度条可叠加
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%"> Free Space </div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%"> Warning </div> <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%"> Danger </div> </div>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Progress Bar</title>
<script>
function showHTMLContent(showElement, codeElement) {
$(showElement).html($('<div/>').text($(codeElement).html()).html());
}
$(function() {
showHTMLContent('#showBasicStyle', '#basicStyle');
showHTMLContent('#showWithLabel', '#withLabel');
showHTMLContent('#showWithColor', '#withColor');
showHTMLContent('#showMulti', '#multi');
$(":radio[name='style']").click(function() {
$("#progressBar").attr("class", $(this).val());
if ($(":checkbox[name='striped']").prop("checked")) {
$("#progressBar").addClass('progress-bar-striped');
}
if ($(":checkbox[name='active']").prop("checked")) {
$("#progressBar").addClass('active');
}
showHTMLContent('#showWithColor', '#withColor');
});
$(":checkbox[name='striped']").change(function() {
if (this.checked) {
$(":checkbox[name='active']").removeAttr("disabled");
$("#progressBar").addClass('progress-bar-striped');
showHTMLContent('#showWithColor', '#withColor');
} else {
if ($(":checkbox[name='active']").prop("checked")) {
$(":checkbox[name='active']").prop("checked", false);
$("#progressBar").removeClass('active');
}
$(":checkbox[name='active']").attr("disabled", "disabled");
$("#progressBar").removeClass('progress-bar-striped');
showHTMLContent('#showWithColor', '#withColor');
}
});
$(":checkbox[name='active']").change(function() {
if (this.checked) {
$("#progressBar").addClass('active');
showHTMLContent('#showWithColor', '#withColor');
} else {
$("#progressBar").removeClass('active');
showHTMLContent('#showWithColor', '#withColor');
}
});
});
</script>
</head>
<body>
<div class="container">
<h1>基本样式</h1>
<h2>代码</h2>
<pre id="showBasicStyle"></pre>
<h2>样式</h2>
<div id="basicStyle">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
</div>
<br><br>
<h1>带标签的进度条</h1>
<h2>代码</h2>
<pre id="showWithLabel"></pre>
<h2>样式</h2>
<div id="withLabel">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
<br><br>
<h1>改变进度条颜色</h1>
<h2>选择样式</h2>
<form>
<input type="radio" name="style" value="progress-bar" checked> progress-bar <br>
<input type="radio" name="style" value="progress-bar progress-bar-success"> progress-bar progress-bar-success <br>
<input type="radio" name="style" value="progress-bar progress-bar-info"> progress-bar progress-bar-info <br>
<input type="radio" name="style" value="progress-bar progress-bar-warning"> progress-bar progress-bar-warning <br>
<input type="radio" name="style" value="progress-bar progress-bar-danger"> progress-bar progress-bar-danger <br>
<input type="checkbox" name="striped" value="progress-bar-striped"> progress-bar-striped <br>
<input type="checkbox" name="active" value="progress-bar-striped active" disabled="disabled"> progress-bar-striped active <br>
</form>
<h2>代码</h2>
<pre id="showWithColor"></pre>
<h2>样式</h2>
<div id="withColor">
<div class="progress">
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
</div>
<br><br>
<h1>混合多个</h1>
<h2>代码</h2>
<pre id="showMulti"></pre>
<h2>样式</h2>
<div id="multi">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>
</div>
<br><br>
</div>
</body>
</html>