1、被修改的兩個標籤詞：
2.3版 3.0版
.bar |
.progress-bar |
.bar-* |
.progress-bar-* |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" href="dist/css/bootstrap.css" >
- <script src="dist/js/bootstrap.js"></script>
- <title>無標題文檔</title>
- </head>
- <body style="margin:200px;">
- <span>普通的進度條</span>
- <div class="progress">
- <div class="progress-bar" role="progessbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
- <span class="sr-only">60% Complete</span>
- </div>
- </div>
- <span>彩條進度條，當然去掉 progress-striped 就會是每個單色的進度條（不支持IE8）</span>
- <div class="progress progress-striped">
- <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
- <span class="sr-only">40% Complete (success)</span>
- </div>
- </div>
- <div class="progress progress-striped">
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
- <span class="sr-only">20% Complete</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: 60%">
- <span class="sr-only">60% Complete (warning)</span>
- </div>
- </div>
- <div class="progress progress-striped">
- <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
- <span class="sr-only">80% Complete (danger)</span>
- </div>
- </div>
- <span>炫動進度條 加active（不支持各個IE版本）</span>
- <div class="progress progress-striped active">
- <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
- <span class="sr-only">45% Complete</span>
- </div>
- </div>
- </body>
- </html>
3、相對應的效果圖：
