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 ...
随机推荐
- 2014-10-31 NOIP模拟赛
10.30 NOIp 模拟赛 时间 空间 测试点 评测方式 挖掘机(dig.*) 1s 256M 10 传统 黑红树(brtree.*) 2s 256M 10 传统 藏宝图(treas. ...
- P5346 【XR-1】柯南家族
题目地址:P5346 [XR-1]柯南家族 Q:官方题解会咕么? A:不会!(大雾 题解环节 首先,我们假设已经求出了 \(n\) 个人聪明程度的排名. \(op = 1\) 是可以 \(O(1)\) ...
- mac for Idea配置Tomcat
参考链接地址:http://blog.csdn.net/zsy3313422/article/details/52583091 IntelliJ使用 ##使用IntelliJ IDEA配置web项目时 ...
- jsf+ejb
jsf+ejb 示例 http://docs.jboss.org/jbossas/docs/Installation_And_Getting_Started_Guide/5/html/Sample_J ...
- [TCP/IP]IP协议
IP数据报 IP是TCP/IP协议族中最核心的协议,所有的TCP.UDP.ICMP.IGMP数据都以IP数据报的格式传输.IP仅提供尽力而为的传输服务,如果发生某种错误,IP会丢失该数据,然后发送IC ...
- bzoj2662: [BeiJing wc2012]冻结 最短路 建图
好久没有1A题啦♪(^∇^*) 一个sb建图,我居然调样例调了10min 看起来是双向边,其实在建图的时候要当成有向图, 否则他会时间倒流(233) 把每个点裂成k个点,然后把每条边裂成4条边(正向反 ...
- AXURE-手把手教你做汉化
我们默认下载的AXURE是英文版的,对于英文能力不足或者不习惯英文界面的,那必须使用汉化手段,网上也有很多朋友已经为大家做好了汉化文件,这里介绍一下如何自己做AXURE的汉化. 如何开始汉化 如何 ...
- unity3d + photon + grpc + nodejs + postgis/postgresql 游戏服务器设计
unity3d + photon + grpc + nodejs + postgis/postgresql 游戏服务器设计 最近做玩票性质的游戏项目,客户端技术是 unity3d 和 android. ...
- columns分栏与flex弹性盒模型
columns 分栏 值:column-width:设置每列的宽度 column-count:设置列数 例:columns{200px 3} 列数和宽度固定 co ...
- swift 基础-4
函数:完成特定任务的代码块,通过名字来表示函数做什么 func 函数名(形参:形参类型)->返回类型 command +option+0 隐藏右边的框 //定义函数 func sayHello( ...