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 ...
随机推荐
- 2017-8-31 NOIP模拟赛
可接受序列 [题目描述] 让计算机这样读入一列非负整数: 1.读入数T. 2.接着往下读入T个数. 3.如果数列读完了,则停止,否则,转到1. 但是,往往会出现这样的问题:执行第2步时,数列已经没有T ...
- Docker 安装部署RabbitMQ
获查询镜像 docker search rabbitmq:management 可以看到如下结果: 获取镜像 docker pull rabbitmq:management 运行镜像 docker r ...
- C 语言实例 - 循环输出26个字母
C 语言实例 - 循环输出26个字母 循环输出 个字母. 实例 #include <stdio.h> int main() { char c; for(c = 'A'; c <= ' ...
- Uva12210-A Match Making Problem
对于每个数字二分找到大于等于它的数,再暴力找到第一个小于它的数 #include<bits/stdc++.h> #define inf 0x3f3f3f3f ; using namespa ...
- 【异常】SQL Server blocked access to STATEMENT OpenRowset/OpenDatasource
异常错误提示:SQL Server blocked access to STATEMENT OpenRowset/OpenDatasource of component Ad Hoc Distrib ...
- iOS 面试常问之多线程
本片围绕多线程全面展开叙述. 1.为什么要有多线程/多线程是用来干什么的? 2.多线程是什么? 3.如何创建多线程? 4.多线程在哪些情况下会使用/多线程使用场景? 5.三种多线程的优缺点? 6.线程 ...
- JFrame Frame 窗口关闭
JFrame是Frame的子类,即JFrame继承自Frame. JFrame是javax.swing.JFrame的类,Frame是java.awt.Frame的类. 类似的还有JButton.Bu ...
- python基础---有关nparray----切片和索引（一）
Numpy最重要的一个特点就是其N维数组对象,即ndarray,该对象是一种快速而灵活的大数据集容器,实际开发中,我们可以利用这种数组对整块数据执行一些数学运算. 有关ndarray,我们就从最简单的 ...
- Linux常用操作详解
第1章 Linux命令基础 1.1 习惯 操作前备份,操作后检查 1.2 简单目录结构 一切从根开始,与windows不同 1.3 规则 [root@znix ~]# [用户名@主机名 你在哪]# 1 ...
- 【Unity3D】实现太阳系
实践要求:写一个程序,实现一个完整的太阳系,其他星球围绕太阳的转速必须不一样,并且不再一个法平面内. 法平面是指过空间曲线的切点,且与切线垂直的平面.要求不在一个法平面内,则在保证所有行星以及太阳在一 ...