<!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. 洛谷P3847 [TJOI2007]调整队形

    P3847 [TJOI2007]调整队形 题目背景 学校艺术节上,规定合唱队要参加比赛,各个队员的衣服颜色不能很混乱:合唱队员应排成一横排,且衣服颜色必须是左右对称的. 例如:“红蓝绿蓝红”或“红蓝绿 ...

  2. Node.js 内置模块crypto加密模块(2) AES

    AES:高级加密标准 ( Advanced Encryption Standard ) AES是一种对称加密算法:加密需要密钥,且加密密钥和解密密钥相同 下面是AES加密的Node实现: " ...

  3. webpack 打包和手动创建一个vue的项目

    首先我们为啥要用webpack,为啥不用其他的打包的工具. 先听我捋捋, Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片. ...

  4. js函数-构成

    前言 函数是一种封装,在任何语言中都是一个核心概念.在js中,函数是做为对象的子类型存在的.可以拥有自己的属性和方法,可以做为值进行传递,这两个特性让js拥有使用函数式编程的能力. 函数的声明 字面量 ...

  5. 《Python数据科学手册》第五章机器学习的笔记

    目录 <Python数据科学手册>第五章机器学习的笔记 0. 写在前面 1. 判定系数 2. 朴素贝叶斯 3. 自举重采样方法 4. 白化 5. 机器学习章节总结 <Python数据 ...

  6. Python简易购物车程序

    2019年5月24日,是我离开北京回学校的日子.我退了组的房子,辞了工作,带着对小秋香不舍回家,这匆匆一别,不知何时才是归期. 这几天都疏于学习,因为每一天我都会和她找点有意思的事情来做,如果这一别就 ...

  7. vue element-ui IE9--11报 “无法获取未定义或null引用的属性‘toLowerCase’”

    今天做zymh比赛的一个管理后台,用的技术是vue+element-ui+vue-router+axios,其他浏览器运行的很好,但是在IE(从IE11到IE9,vue支持IE9以上)都报错 点进去就 ...

  8. PHP函数生成随机数

    通常情况下,当我们要生成一个随机字符串时,总是先创建一个字符池,然后用一个循环和mt_rand()或rand()生成php随机数,从字符池中随机选取字符,最后拼凑出需要的长度,代码如下: <?p ...

  9. 深入JVM内核---原理,诊断与优化

    JVM的概念 JAM是Java Virtual Machine的简称.意为Java虚拟机 虚拟机 指通过软件模拟的具有完整硬件系统功能的,运行在一种完整隔离环境中的完整计算机系统 有哪些虚拟机 - V ...

  10. 解决ueditor jquery javascript 取值问题

    代码如下: var content = UE.getEditor('myEditor').getContent();   myEditor是ueditor 的名称name.   代码如下: <t ...