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 ...
随机推荐
- 【转】mysql日期格式+日期增加天数
WHERE DATE_FORMAT(字段,'%m/%d')=DATE_FORMAT(DATE_ADD(SYSDATE(),INTERVAL 7 DAY),'%m/%d') 条件 数据库字段时间=当前时 ...
- 洛谷P3327 [SDOI2015]约数个数和（莫比乌斯反演）
传送门 公式太长了……我就直接抄一下这位大佬好了……实在懒得打了 首先据说$d(ij)$有个性质$$d(ij)=\sum_{x|i}\sum_{y|j}[gcd(x,y)=1]$$ 我们所求的答案为$ ...
- cinder存储服务
一.cinder 介绍: 理解 Block Storage 操作系统获得存储空间的方式一般有两种: 1.通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文件系 ...
- 剑指Offer的学习笔记（C#篇）-- 斐波那契数列
题目:大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). 一 . 理解概念 斐波那契数列概念:斐波那契数列(Fibonacci sequence), ...
- Unity---协程的简单使用
1.作用 协程的作用一共有两点: 延时执行代码. 在某项操作完后再执行代码. 就是控制代码在特性的时间执行. 2.协程和线程的区别 协程不是异步,不需要考虑同步和锁问题 线程避免了无意义的调度,提高了 ...
- plsql developer 执行sql 文件
用 Command Window,执行 @'sql file path' 注意,上面sql文件路径要加单引号
- 如何使用WPS从正文开始页码为1，而不是从目录开始？
在插入目录前,在最前页插入一个空白页,在这个空白页里面生成目录,双击正文的页脚,点一下出现的与上一节相同的按钮,关闭页眉页脚的同前节,发现与上一节相同这几个字消失后,把目录中的页码删除,不会在影响正文 ...
- SQL SERVER CAST 和 CONVERT 函数
遇到CAST 函数转化数字不一致情况, select CAST('0000000011237590798' AS money) / 100 AS Amount--output : 112375907. ...
- XHR的跨域请求和JSONP详解
首先:什么是跨域? Cross Domain Request:从一个资源请求另一个资源,二者所在的请求地址不同,域名不同.端口号不同.请求协议不同. 它是由浏览器的同源策略造成的,是浏览器对JavaS ...
- 练习三十二：用python实现:按相反的顺序输出列表的每一位值
用python实现:按相反的顺序输出列表的每一位值 1. 使用list[::-1] list1 = ["one","two","three" ...