bootstrap课程9 bootstrap如何实现动画加载进度条的效果
2024-10-20 13:39:27
bootstrap课程9 bootstrap如何实现动画加载进度条的效果
一、总结
一句话总结:在bootstrap进度条的基础上添加js(定时器),动态的改变进度条即可。很简单的。
1、路径导航是什么?
就是面包屑导航
2、巨幕的特点是什么?
加了灰色的背景色,然后把里面的字变大看起来很宽大的感觉
二、bootstrap如何实现动画加载进度条的效果
1、相关知识
路径导航:
.breadcrumb
.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>
最新文章
- LeetCode Online Judge 1. Two Sum
- sudo su权限案例
- FastDFS搭建及java整合代码【转】
- Eclipse @override报错解决
- js封常用类
- Python标准库12 数学与随机数 (math包,random包)
- jquery 获得table 行数
- C#创建Windows服务入门图解(VS2010)
- coco2d-x 纹理研究
- HDU 5821 Ball (贪心)
- Servlet课程0426(十二)Servlet MV模式下用户登录及查看用户表中所有用户
- UESTC_秋实大哥与线段树 2015 UESTC Training for Data Structures<;Problem M>;
- Android应用开发之(通过ClipboardManager, ClipData进行复制粘贴)
- Java基础--定时任务Timer(转载)
- C# 复制列表
- 实现快餐配送页面jq
- HTA基础
- Spring Boot之WebSocket
- bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图
- Java Integer常量池——IntegerCache内部类
热门文章
- SCOPE_IDENTITY()和 SELECT @@IDENTITY 的用法
- Linux桌面词典 星际译王(StarDict)
- A电脑能ping 通B电脑,但B电脑无法ping能和访问B
- angular4自定义组件非input元素实现ngModel双向数据绑定
- Mark Compact GC (Part two :Two-Finger)
- Django_shell命令操作
- Docker学习总结(6)——通过 Docker 化一个博客网站来开启我们的 Docker 之旅
- 利用命令行删除Android系统自带应用的方法
- leetcode第一刷_Rotate List
- Nginx+tomcat+ssl免费证书配置