Bootstrap進度條 · 致力于web前端技術撰寫

Bootstrap 進度條使用 CSS3 過渡和動畫來獲得該效果。Internet Explorer 9 及之前的版本和舊版的 Firefox 不支持該特性， Opera 12 不支持動畫。 ### 默認的進度條創建一個基本的進度條的步驟如下： - 添加一個帶有 class?.progress?的 <div>。 - 接著，在上面的 <div> 內，添加一個帶有 class?.progress-bar?的空的 <div>。 - 添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width = device-width,initial-scale = 1.0"> <link rel="stylesheet" href="bootstrap.min.css"> <script src = "js/jquery-1.11.2.min.js"></script> <script src = "js/bootstrap.min.js"></script> <title>CSSDemo</title> </head> <body style="padding:30px;"> <div class="container"> <div class="col-lg-4"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;"></div> <span class="sr-only">40%完成</span> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width:50%;"></div> <span class="sr-only">20%完成</span> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100" aria-valuemin="0" style="width:60%;"></div> <span class="sr-only">60%完成</span> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100" aria-valuemin="0" style="width:70%;"></div> <span class="sr-only">70%完成</span> </div> </div> </div> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f910972.jpg) ### 條紋的進度條創建一個條紋的進度條的步驟如下： - 添加一個帶有 class?.progress?和?.progress-striped?的 <div>。 - 接著，在上面的 <div> 內，添加一個帶有 class?.progress-bar?和 class?progress-bar-*?的空的 <div>。其中，* 可以是?success、info、warning、danger。 - 添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。 ~~~ <body style="padding:30px;"> <div class="container"> <div class="col-lg-4"> <div class="progress progress-striped"> <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;"></div> <span class="sr-only">40%完成</span> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width:50%;"></div> <span class="sr-only">50%完成</span> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100" aria-valuemin="0" style="width:60%;"></div> <span class="sr-only">60%完成</span> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100" aria-valuemin="0" style="width:70%;"></div> <span class="sr-only">70%完成</span> </div> </div> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f92f311.jpg) ### 動畫的進度條創建一個動畫的進度條的步驟如下： - 添加一個帶有 class?.progress?和?.progress-striped?的 <div>。同時添加 class?.active。 - 接著，在上面的 <div> 內，添加一個帶有 class?.progress-bar?的空的 <div>。 - 添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。這將會使條紋具有從右向左的運動感。 ~~~ <body style="padding:30px;"> <div class="container"> <div class="col-lg-4"> <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;"></div> <span class="sr-only">40%完成</span> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width:50%;"></div> <span class="sr-only">50%完成</span> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100" aria-valuemin="0" style="width:60%;"></div> <span class="sr-only">60%完成</span> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100" aria-valuemin="0" style="width:70%;"></div> <span class="sr-only">70%完成</span> </div> </div> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f92f311.jpg) ### ### 堆疊的進度條把多個進度條放在相同的?.progress?中即可實現堆疊 ~~~ <body style="padding:30px;"> <div class="container"> <div class="col-lg-4"> <div class="progress progress-striped"> <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;"></div> <span class="sr-only">40%完成</span> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width:50%;"></div> <span class="sr-only">20%完成</span> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemax="100" aria-valuemin="0" style="width:60%;"></div> <span class="sr-only">60%完成</span> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemax="100" aria-valuemin="0" style="width:70%;"></div> <span class="sr-only">70%完成</span> </div> </div> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f94682d.jpg)