<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<style type="text/css">
div.col-xs-3{
text-align: center;
}
</style>
</head>
<body>
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div style="width:800px;margin:20px">
<div class="progress">
<div class="progress-bar" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width:60%;min-width:2em;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:40%">
40%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:20%">
20%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:80%">
80%
</div>
</div>
<div class="progress"><!--带条纹-->
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:40%">
40%
</div>
</div>
<div class="progress"><!--堆叠-->
<div class="progress-bar progress-bar-success" style="width:35%"></div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-danger" style="width:20%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" style="width:50%">50%</div>
</div>
</div>
</body>
</html>
bootstrap进度条
最新推荐文章于 2024-05-16 06:47:40 发布