<!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 class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"><span class="sr-only">40%完成(成功)</span></div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%"><span class="sr-only">30%完成(成功)</span></div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"><span class="sr-only">20%完成(成功)</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历练实例：轮播(carousel)

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

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

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

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

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

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

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

  8. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  9. Bootstrap 历练实例 - 折叠（Collapse）插件事件

    事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...

随机推荐

  1. HE学业水平考试游记 By cellur925

    \(I'm\) \(back\). Day -2 今天高二全体学生开始了愉悦的长达两天半的自习2333. 第一天刚了最不会的地理必修一.以前没发现,其实真的挺有趣的233. 于是用了一天学习了一年的地 ...

  2. Django之ORM优化查询的方式

    ORM优化查询的方式 一.假设有三张表 Room id 1 2 .. 1000 User: id 1 .. 10000 Booking: user_id room_id time_id date 1 ...

  3. Codeforces Round #562 (Div. 2) A.Circle Metro

    链接:https://codeforces.com/contest/1169/problem/A 题意: The circle line of the Roflanpolis subway has n ...

  4. Mac客户端CentOS服务器 SSH免密码登陆

    假定有2个服务器A(127.0.0.1)和B(192.168.0.1),A作为客户端来登录服务器B 1.在服务器A下使用 ssh-keygen -t ras -P 会在-/.ssh目录下'生成公钥(i ...

  5. window.addeventlistener使用方法

    http://www.jb51.net/article/49858.htm .................................................... (要注意的是div ...

  6. SSIS父子维度

    1.数据仓库结构: 2.区域的AttributeHierarchyVisible设置为False 3.Parent ID的Usage设置为Parent 4.级别命名: 5.结果:

  7. Ubuntu下安装Yarm-PM2

    首先打开yarm的官网.https://www.yarnpkg.com/zh-Hant/ (一)yarn的官方安装方法: 1.上通过 Debian 套件安裝 Yarn,粘贴以下命令 curl -sS ...

  8. 对于es线程池使用的思考

    es有内置的线程池 在实际项目中,发现   使用client框架关闭连接太慢(其实是把连接归还到池子里),采用异步关闭. 随着连接的关闭,计算机内存在不断下降 ------------------- ...

  9. 用canvas裁剪图片

    var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) { var canvas = ...

  10. Spring连接数据库

    public class Book { private int bookid; private String bookname; private String bookauthor; private ...