<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：动画的进度条</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 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历练实例：动画的进度条的更多相关文章

  1. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  2. Bootstrap历练实例：堆叠的进度条

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap历练实例：默认的进度条

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap历练实例：默认的缩略图

    本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本.Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下: 1.在图像的周围 ...

  5. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  6. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  9. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

随机推荐

  1. DOTween Sequence 使用图解

    http://blog.csdn.net/jiejieup/article/details/41521577 最近在使用DOTween制作一些动画过渡的内容,发现非常好用,使用Sequence类可以方 ...

  2. 2014-11-1 NOIP模拟赛2

    一.题目概览 中文题目名称 连连看 取数 游戏 迎接仪式 英文题目名称 card cycle game welcome 可执行文件名 card cycle game welcome 输入文件名 car ...

  3. PJzhang:安全小课堂-安全软件为什么很重要，看这里！

    猫宁!!! 参考链接: http://www.360.cn/webzhuanti/mianyigongju.html https://www.freebuf.com/fevents/204100.ht ...

  4. redis之五大数据类型

    redis之五大数据类型 redis redis的两种链接方式 简单链接 1234 import redisconn = redis.Redis(host='10.0.0.200',port=6379 ...

  5. RTC-IC-PCF2129

    一特点: -20~70度,SPI/I2C接口,1.2 V to 4.2 V ,可编程看门狗,时钟输出以便校准,闹钟输出,时间戳输出.低功耗高精度,电源切换,中断输出. SPI接口和I2C接口硬件接法: ...

  6. watir 的api在线文档

    http://rubydoc.info/gems/watir-webdriver/frames http://rdoc.info/gems/watir-webdriver/frames http:// ...

  7. return void ajax

    public class UserInfo { private String name; private Integer age; public String getName() { return n ...

  8. C# 指定WebBrowser 的 User Agent 版本

    今天用WebBrowser 打开网页,本机ie是ie9 可是WebBrowser 显示的效果明显不是ie9 ,百度查资料才知道,其实是因为直接用IE跟使用WebBrowser 运行的是不同的User ...

  9. I/O————流

    流的关系图 缓冲流分为字节和字符缓冲流(图中是经常用的搭配,PrintWrite与BufferedWrite都继承java.io.Write) 字节缓冲流为: BufferedInputStream— ...

  10. <img/>标签属性

    属性        属性值               描述 src            url               图像的路径 alt             文本            ...