<!--基本进度条-->

<div class="progress">

  <div class="progress-bar" style="width:40%">%</div>

</div>

<!--彩色进度条-->

<div class="progress">

  <div class="progress-bar progress-bar-success" style="width:40%">%</div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-info" style="width:40%">%</div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-warning" style="width:40%">%</div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-danger" style="width:40%">%</div>

</div>

<!--条纹进度条-->

<div class="progress progress-striped">

  <div class="progress-bar progress-bar-success" style="width:40%">%</div>

</div>

<!--动态条纹进度条-->

<div class="progress progress-striped active">

  <div class="progress-bar progress-bar-success" style="width:40%">%</div>

</div>

<!--层叠进度条-->

<div class="progress progress-striped active">

  <div class="progress-bar progress-bar-success" style="width:20%">%</div>

  <div class="progress-bar progress-bar-info" style="width:20%">%</div>

  <div class="progress-bar progress-bar-warning" style="width:20%">%</div>

  <div class="progress-bar progress-bar-danger" style="width:20%">%</div>

  <div class="progress-bar" style="width:20%">%</div>

</div>

 

Bootstrap_进度条的更多相关文章

  1. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  2. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  3. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  4. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  5. WPF自定义控件第一 - 进度条控件

    本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...

  6. python实现一个控制台下的进度条

    今天写练习爬虫感觉很需要个进度条,就随手用函数实现了一个,到了晚上突然感觉到这个东西应该单独写出来以后肯定用用得着. 代码也很简单,我就不细讲了,直接上代码了. 测试代码: instance.py i ...

  7. 【Win 10 应用开发】通过数据绑定更新进度条

    实现 INotifyPropertyChanged 接口可以在属性更改后通知数据的使用者,这个相信大伙儿都知道.于是,有朋友会问:对于要实时显示进度的情况,比如更新进度条,能用这个实现吗? 当然是可以 ...

  8. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  9. 【Android】 修复ijkPlayer进行m3u8 hls流播放时seek进度条拖动不准确的问题

    项目中使用的播放器是ijkPlayer,发现播放切片特点的hls流(m3u8格式的视频)拖动seekBar的时候会莫名的跳转或者seek不到准确的位置,发现网友也遇到了同样的问题,ijk的开发者也说明 ...

随机推荐

  1. ngrok访问外网

    1. 外网映射工具介绍 windows用户: 1,下载windows版本的客户端,解压到你喜欢的目录2,在命令行下进入到path/to/windows_386/下3,执行 ngrok -config= ...

  2. java中内部类使用小结

    内部类是指在一个外部类中再定义一个类,类名不需要和文件名相同 内部类可以是静态的,类的修饰符可以是private,default,protect,public修饰 ,而外部类只能是public 和 d ...

  3. 图解Java内存回收机制

    在Java中,它的内存管理包括两方面:内存分配(创建Java对象的时候)和内存回收,这两方面工作都是由JVM自动完成的,降低了Java程序员的学习难度,避免了像C/C++直接操作内存的危险.但是,也正 ...

  4. 【iCore3 双核心板_ uC/OS-III】例程十一：任务消息队列

    实验指导书及代码包下载: http://pan.baidu.com/s/1pLQYiE3 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  5. zepto源码--核心方法9（管理包装集）--学习笔记

    今天介绍的是与子元素相关的函数,children, find, contents children 从源码来看,主要是调用过滤函数filtered对遍历整个包装集返回的children进行过滤. 仔细 ...

  6. Linux系统下Redis安装（二）

    上一篇随笔,已经成功开启了Redis-server,客户端已经可以正常对redis进行正常操作. 但是,redis-server开启的同时,一个大大doc黑屏也在那里开启着,接下来就对讲解如何在Lin ...

  7. Jmeter工作原理

  8. LUA 函数式编程demo

    什么是函数式编程 http://www.zhihu.com/topic/19585411/hot 函数式编程的本质函数式编程中的函数这个术语不是指计算机中的函数(实际上是Subroutine),而是指 ...

  9. ASP.NET c# Redis 开发

    Redis简介 Redis是一个开源的,使用C语言编写,面向“键/值”对类型数据的分布式NoSQL数据库系统,特点是高性能,持久存储,适应高并发的应用场景.Redis纯粹为应用而产生,它是一个高性能的 ...

  10. 使用 robotframework 自动化测试系列 二 -----环境搭建

    环境搭建是测试人员基础,本质都是不难的,按照流程和步骤一步步做,遇到问题不要担心,解决的问题越多,你理解的也就越多. 1. 安装python环境,python现在有python2 和python3.由 ...