.progress——指定div包裹進度條元件；
.progress-bar——設定div為進度條樣式；
.progress-bar-info、.progress-bar-warning、.progress-bar-success、.progress-bar-danger——設定進度條的情境效果；
.pregress-bar-striped——設定進度條具有條紋效果；
.active——可設定進度條的條紋處于動畫狀态；
屬性aria-valuemin——設定進度條的最小值；
屬性aria-valuemax——設定進度條的最大值；
屬性aria-valuenow——設定進度條的目前值；
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>飯盒兒——發現身邊不一樣的世界</title>
<link rel="stylesheet" href="css/bootstrap.min.css" target="_blank" rel="external nofollow" type="text/css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
</style>
</head>
<body>
<div class="container">
<h4>進度條示例</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
<span class="sr-only">50%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width:2%">
2%
</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:60%">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="sr-only">40%</span>
</div>
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="sr-only">40%</span>
</div>
</div>
</div>
</body>
</html>
![HTML5Canvas 酷炫效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)