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、代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         body{

             padding-top:30px;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.min.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.min.js"></script>

     <script src="bs/js/holder.min.js"></script>

 </head>

 <body>

     <div class="container">

         <h1 class='page-header'>Bootstrap框架</h1>    

         <div class="progress">

             <div class="progress-bar progress-bar-striped active" style='width:0%'>0%</div>

         </div>

     </div>

 </body>

 <script>

 s=0;

 v=10;

 sobj=setInterval(function(){

     s+=v;

     if(s>=100){

         clearInterval(sobj);

     }

     $('.progress-bar').html(s+'%').css({'width':s+'%'});

 },100);

 </script>

 </html>