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
.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>