<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. Ubuntu 中文输入法安装包

    1. 打开 Dashboard http://www.2cto.com/os/201207/144189.html

  2. ExtJS 刷新后，默认选中刷新前最后一次选中的节点

          在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点.这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的 ...

  3. enmo_day_09

    1. 数据库 select name from v$database; : 数据库名称 select db_unique_name from v$database; : 数据库唯一名称 select ...

  4. rails常用验证方法 （转）

    validates_presence_of       :login,  :message => "用户名不能为空!" validates_length_of         ...

  5. rails之 Migrations (转)

    1.简介 在rails中用migration可以很方便的管理数据库的结构.可以创建数据库,创建表,删除表,添加字段,删除字段,整理数据. migration就是一系列的class,这些类都继承了Act ...

  6. css2----实现三角形和带角框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. namenode需要升级

    java.io.IOException:File system image contains an old layout version -18.An upgrade to version -41 i ...

  8. innerHTML,innerText,outHTML,outText区别

    <p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;& ...

  9. rpm软件包管理

    RPM 有五种基本的操作方式(不包括创建软件包): 安装, 卸载, 升级, 查询,和验证. 下面我们就来逐一的讲解吧. 一. 安装RPM包 RPM 软件包通常具有类似foo-1.0-1.i386.rp ...

  10. nl2br() 函数

    nl2br() 函数在字符串中的每个新行 (\n) 之前插入 HTML 换行符 (<br />).经常用于在线编辑的内容,以便显示. 用法:nl2br(string) 参数 描述 stri ...