BootStrap 分页 + 进度条 

 1   <div class="container">
 2         <!--分页器-->
 3         <ul class="pager">
 4             <li><a href="#">上一页</a></li>
 5             <li><a href="#">下一页</a></li>
 6         </ul>
 7         <!--分页-->
 8         <ul class="pagination">
 9             <li><a href="#" aria-label="Previous">上一页</a></li>
10             <li><a href="#">1</a></li>
11             <li><a href="#">2</a></li>
12             <li><a href="#">3</a></li>
13             <li><a href="#">4</a></li>
14             <li><a href="#">5</a></li>
15             <li><a href="#" aria-label="Next">下一页</a></li>
16         </ul>
17         <!--进度条-->
18         <div class="progress">
19             <div class="progress-bar" style="width:10%">10%</div>
20         </div>
21         <div class="progress">
22             <div class="progress-bar progress-bar-danger" style="width:10%">10%</div>
23         </div>
24         <div class="progress">
25             <div class="progress-bar progress-bar-warning" style="width:20%">20%</div>
26         </div>
27         <div class="progress">
28             <div class="progress-bar progress-bar-success" style="width:30%">30%</div>
29         </div>
30         <div class="progress">
31             <div class="progress-bar progress-bar-info" style="width:40%">40%</div>
32         </div>
33         <div class="progress">
34             <div class="progress-bar progress-bar-striped" style="width:50%">50%</div>
35         </div>
36         <!--动态效果-->
37         <div class="progress">
38             <div class="progress-bar progress-bar-striped active" style="width:60%">60%</div>
39         </div>
40     </div>

 

以上代码效果图如下

 

posted @ 2016-12-22 15:17  时间脱臼  阅读(231)  评论(0)    收藏  举报