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 ...
随机推荐
- python2与python3 版本区别
目录 编码 输入输出 中文 除法 长整形 内置函数map xrange init reduce 字符串类型 dict字典 经典类 新式类 未完待补充 编码 python2默认编码器为ascii码(只支 ...
- web项目部署后动态编译无法找到依赖的jar包
很纳闷的一个问题,通过配置文件生成的java源码在本地动态编译没有问题,但是部署服务器后编译不通过,找不到依赖的jar包. 通过网上查资料,找到一个兄弟提供的方法,问题解决了:下面贴出代码以供参考: ...
- 《SQL 进阶教程》 case:练习题1-1-1 多列数据的最大值
select name, case when case when x > y then x else y end < z then z else case when x < y th ...
- 测试REST Web服务
EST Web服务的测试计划 线程组 HTTP请求 与任何Jmeter测试一样,我们首先需要创建一个线程组以及一个HTTP请求采样器. 如果您现在运行测试,则可能会收到错误,响应代码为415,响应消息 ...
- 【Oracle】OVER(PARTITION BY)函数用法
http://blog.itpub.net/10159839/viewspace-254449/ ................................ OVER(PARTITION BY) ...
- 046 Permutations 全排列
给定一个含有不同数字的集合,返回所有可能的全排列.比如,[1,2,3] 具有如下排列:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2 ...
- c#基础3-方法的重载静态和非静态,字段属性,方法
方法的重载概念:方法的重载指的就是方法的名称相同给,但是参数不同.参数不同,分为两种情况1).如果参数的个数相同,那么参数的类型就不能相同.2).如果参数的类型相同,那么参数的个数就不能相同.***方 ...
- .net程序员业余Android开发赚点外快(介绍一下自己的经验)
记得是11年10月份开始研究android的,当时还不会java,听说android比较火,自己也买了个垃圾android机,平时工作也不是特别忙,于是我就突发奇想,想试试做一下android应用可不 ...
- iOS 面试常问之多线程
本片围绕多线程全面展开叙述. 1.为什么要有多线程/多线程是用来干什么的? 2.多线程是什么? 3.如何创建多线程? 4.多线程在哪些情况下会使用/多线程使用场景? 5.三种多线程的优缺点? 6.线程 ...
- PHP变量、数据类型、字符串、运算符、条件语句、循环语句、数组、函数
PHP 简介: php :是一门动态交互的计算机语言 静态交互 html css js 但凡是动态交互的 都需要服务器. php都是以.php结尾的文件 Html文件里不能写php代码,但是ph ...