您的位置：首页 > Web前端 > BootStrap

Bootstrap学习笔记 13 - 进度条

2017-11-29 14:02 393 查看

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

查看运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航