bootstrap课程9 bootstrap如何实现动画加载进度条的效果 bootstrap课程9 bootstrap如何实现动画加载进度条的效果

一、总结

一句话总结：在bootstrap进度条的基础上添加js（定时器），动态的改变进度条即可。很简单的。

1、路径导航是什么？

就是面包屑导航

2、巨幕的特点是什么？

加了灰色的背景色，然后把里面的字变大看起来很宽大的感觉

二、bootstrap如何实现动画加载进度条的效果

1、相关知识

路径导航:
.breadcrumb

分页效果:
.pagination

上下页:
.pager

标签:
.label
.label-primary
.label-success
.label-info
.label-warning
.label-danger

徽章:
.badge

巨幕:
.jumbotron

缩略图:
.thumbnail

警告框:
.alert
.alert-success
.alert-info
.alert-warning
.alert-danger

进度条:
.progress

2、代码

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6     <title>index</title>
 7     <style>
 8         *{
 9             font-family: 微软雅黑;
10         }
11         body{
12             padding-top:30px;
13         }
14     </style>
15     <link rel="stylesheet" href="bs/css/bootstrap.min.css">
16     <script src="bs/js/jquery.min.js"></script>
17     <script src="bs/js/bootstrap.min.js"></script>
18     <script src="bs/js/holder.min.js"></script>
19 </head>
20 <body>
21     <div class="container">
22         <h1 class='page-header'>Bootstrap框架</h1>    
23         
24         <div class="progress">
25             <div class="progress-bar progress-bar-striped active" style='0%'>0%</div>
26         </div>
27     </div>
28 </body>
29 <script>
30 s=0;
31 v=10;
32 
33 sobj=setInterval(function(){
34     s+=v;
35     if(s>=100){
36         clearInterval(sobj);
37     }
38     $('.progress-bar').html(s+'%').css({'width':s+'%'});
39 },100);
40 </script>
41 </html>