<!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. poj3225(线段树区间更新&hash)

    题目链接: http://poj.org/problem?id=3225 题意: 初始给一个全局为 0~65536 的区间  s, 然后不断地对区间 s 进行 并, 交, 差, 相对差等运算, 输出最 ...

  2. 51nod1205(johnson)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1205 题意:中文题诶- 思路:johnson模板题 流水作业调 ...

  3. linux vim 配置 go 开发环境

    安装vim-go 插件 vim 暂时对golang 还不支持语法高亮,如果用户希望使用vim 开发golang 程序,还需要给vim 安装对应的插件 首先需要安装一个vim-pathogen vim插 ...

  4. HDU-2063-过山车(最大匹配)

    链接:https://vjudge.net/problem/HDU-2063 题意: RPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了.可是,过山车的每一排只有两个座位,而且 ...

  5. loj#6169. 相似序列 hash+主席树

    因为他的相似是在排完序下的 那我就在排序的情况下hash啊 这怎么hash啊 主席树啊! 没了 #include <bits/stdc++.h> #define MAXNODE 50000 ...

  6. 规则引擎.Net Core

    .Net Core 环境下构建强大且易用的规则引擎 https://www.cnblogs.com/chenug/p/9160397.html 本文源码: https://github.com/jon ...

  7. NetCore1.1+Linux

    NetCore1.1+Linux部署初体验   1.环境准备 Centaos7+Win10 虚拟机 Win10安装VS2017 https://www.asp.net/downloads注意勾选下.N ...

  8. 表单和HTML5

    1.form表单 <form action="" method=""> </form> action: 规定当提交表单时,向何处发送表单 ...

  9. 集合（Map、可变参数、Collections）

    集合 第1章 Map接口 1.1 Map接口概述 我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同,如下图. l Collection中的集 ...

  10. ES6学习（1）

    let 和 const 命令 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效.for循环的计数器,就很合适使用let命令. 下面的代码 ...