Bootstrap历练实例：交替的进度条
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:20px;">
<div class="progress">
<div id="div1" class="progress-bar progress-bar-success" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"><span class="sr-only">90%完成(成功)</span></div>
</div>
<div class="progress">
<div id="div2" class="progress-bar progress-bar-info" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"><span class="sr-only">70%完成(成功)</span></div>
</div>
<div class="progress">
<div id="div3" class="progress-bar progress-bar-warning" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"><span class="sr-only">50%完成(成功)</span></div>
</div>
<div class="progress">
<div id="div4" class="progress-bar progress-bar-danger" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%"><span class="sr-only">30%完成(成功)</span></div>
</div>
<div class="progress progress-striped active">
<div id="div2" class="progress-bar progress-bar-success" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%" role="progressbar"><span class="sr-only">70%完成(成功)</span></div>
</div>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap历练实例：交替的进度条的更多相关文章
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap历练实例：动画的进度条
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：堆叠的进度条
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：默认的进度条
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：响应式导航(带有表单)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：响应式导航
<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...
- Bootstrap 历练实例-轮播(carousel)插件的事件
事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- Bootstrap 历练实例 - 折叠（Collapse）插件事件
事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...
随机推荐
- [UE4]C++静态加载问题：ConstructorHelpers::FClassFinder()和FObjectFinder()
http://aigo.iteye.com/blog/2281373 原文作者:@玄冬Wong 相关内容: C++实现动态加载的问题:LoadClass<T>()和LoadObject&l ...
- 30个php操作redis常用方法代码例子【转】
背景:redis这个新产品在sns时很火,而memcache早就存在, 但redis提供出来的功能,好多网站均把它当memcache使用,这是大才小用,这儿有30个方法来使用redis,值得了解. 这 ...
- codevs1105 过河
1105 过河 2005年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description 在河上有一座独木桥,一 ...
- Python面向对象之鸭子类型
python没有多态?他有什么? 他有鸭子类型. 鸭子类型 : 看着像鸭子,他就是鸭子. 比如一些类,他们中有一些方法,有着相同的功能, 这时为我们将这些相同功能的名字命名为一样的. 那么这些类 都互 ...
- Codecraft-17 and Codeforces Round #391 (Div. 1 + Div. 2, combined) B
Bash has set out on a journey to become the greatest Pokemon master. To get his first Pokemon, he we ...
- selenum autoit上传图片
目前,一般实现文件图片上传的方式都是有一个按钮,点击之后直接调用操作系统自身的弹框,选择文件后,实现上传.因为Selenium不支持调用操作系统的操作,所以这种情况下,利用Selenium无法完成图片 ...
- LINUX中IPTABLES防火墙使用
对于有公网IP的生产环境VPS,仅仅开放需要的端口,即采用ACL来控制IP和端口(Access Control List). 这里可以使用Linux防火墙netfilter的用户态工具 iptable ...
- android pm命令
把网络apk下载到盒子或者其他安卓设备上 1.adb push windows的原路径 android设备的路径 2.pm install android设备的路径 注意:这里pm命令是安卓设备才有的 ...
- 中介者模式和php实现
中介者模式: 中介者模式(Mediator Pattern)定义:用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互.中介者模 ...
- CSS3学习-用CSS制作立体导航栏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...