<div class="container">

    <div class="row">

        <div class="col-lg-4">

            <div class="progress">

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

            </div>

            <div class="progress">

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

            </div>

            <div class="progress">

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

            </div>

            <!-- 带条纹的进度条且在动-->

            <div class="progress">

                <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:50%">50%</div>

            </div>

            <!-- 带堆叠效果的进度条-->

            <div class="progress">

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

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

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

                <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:30%">30%</div>

            </div>

        </div>

    </div>

</div>

图：

bootstrap-进度条的更多相关文章

  1. Bootstrap进度条

    前面的话 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等,通过简单.灵活的进度条,可以为当前工作流程或动作提供实时反馈.本文将详细介绍Bootstrap进度条 基本样式 Bootst ...

  2. 第二百四十一节，Bootstrap进度条媒体对象和 Well 组件

    第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...

  3. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

  4. Bootstrap 进度条媒体对象和 Well 组件

    一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...

  5. Ajax文件上传并添加Bootstrap进度条

    1.项目中需要用到文件上传和显示进度,网上各种插件搞得头晕,决定自己实现一个 三个步骤:Ajax上传文件,获取上传进度,显示进度 html: <!DOCTYPE HTML> <htm ...

  6. Bootstrap 进度条媒体对象和条组

    列表组组件 列表组组件用于显示一组列表的组件. //基本实例 <ul class="list-group"> <li class="list-group ...

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

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

  8. Bootstrap各种进度条的实例讲解

    本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用bootstrap教程.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Interne ...

  9. BootStrap学习(4)_分页&标签&缩略图&警告&进度条

    一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页.  .pagination     --添加该 class 来在页面上显示分页. .disa ...

  10. Bootstrap学习 进度条

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

随机推荐

  1. CTSC2015 酱油记

    终于又到写酱油记的时间了...不过开心不起来诶.. Day 0 晚上睡不着觉也不造为啥... 起来看了一本亚里亚小说,继续睡,睡不着... 又起来看了一本亚里亚小说,继续睡,睡不着... 然后...死 ...

  2. F2工作流引擎之 工作流运转模型（三）

    1流程单起点单终止模型 单起点:一个流程定义必须有且唯一起点 单结束点:一个流程定义必须有且唯一结束点. 约定:提单与结束是每个流程必须有的活动,且唯一只有一个提单和结束. 2串行模型 描述:串行(S ...

  3. JAVA OOP 基础知识提纲

    OOP: 面向对象: 认识事物的一个过程,是整体(特征/行为) 认识事物的方式.人类认识事物的自然思维习惯. 对象及类 对象是实实在在具体存在的东西,主要是从两个角度(行为,特征)去观察 类:是一组具 ...

  4. jquery统计页面的pv/ip及停留时间等

    我们在做网站的时候经常需要统计网站的访问信息,这里介绍一个用jquery写的一个统计方法 新建一个js文件jun_record.js 代码如下: var start; var end; var tim ...

  5. RHCE 系列（二）：如何进行包过滤、网络地址转换和设置内核运行时参数

    正如第一部分(“设置静态网络路由”)提到的,在这篇文章(RHCE 系列第二部分),我们首先介绍红帽企业版 Linux 7(RHEL)中包过滤和网络地址转换(NAT)的原理,然后再介绍在某些条件发生变化 ...

  6. 【转】Ant学习笔记——自己构建Ant编译环境

    自从年初开始用NetBeans6.0,才接触到Ant. 这是今年6月份的一篇Ant学习笔记.安装 1.下载并构建环境.   去官网下载src包和bin包.解压缩它们到同一目录,运行build.bat, ...

  7. java.lang.NoClassDefFoundError: org/aopalliance/aop/Advice

    今天在使用动态代理时,遇到了如下问题,报错 java.lang.NoClassDefFoundError: org/aopalliance/aop/Advice 下面是完整的报错信息: 一月 , :: ...

  8. sql2008 无法附加数据库

    sql2008 因为数据库正在使用,所以无法获得对数据库的独占访问权---还原或删除数据库的解决方法 数据库还原出现 3154错误 --主备份 --RESTORE DATABASE [NET_CN] ...

  9. excel列递增方法技巧

    最近处理世界买家网100多万的数据,需要用到excel来对数据进行处理,其中有一项是对数据做一个排序,以方便数据导入时来对应唯一的id编号,之前都是 几万,最多也是30来万的数据,所以列递增就直接用鼠 ...

  10. DIY FSK RFID Reader

    This page describes the construction of an RFID reader using only an Arduino (Nano 3.0 was tested, b ...