<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. HBase Cassandra Riak HyperTable

    Cassandra                                                              HBase 一致性 Quorum NRW策略 通过Goss ...

  2. 配置rc.local开机自启动文件的疑问

    有时我们自己在/etc/rc.d/rc.local里面增加的随机器启动的脚本和指令总是不能自动加载和启动,,机器启动后手动执行脚本又能成功,经常被搞得晕头转向的.最近我经过1天的辛苦测试和查找资料,终 ...

  3. Unix Shell 程序设计 —— 正则表达式

    参考:http://www.cnblogs.com/erichhuang/archive/2012/03/13/2394119.html 简介: 简单的说,正则表达式是一种可以用于模式匹配和替换的强有 ...

  4. docker初学笔记

    什么是docker 不准确的说,docker是一种轻量级的虚拟机,它把可执行文件和运行环境打包成一个image,放在容器里运行,但是启动速度比虚拟机快很多,资源消耗小.这种技术主要是为了解决部署环境的 ...

  5. AspNetPager分页

    1.页面部分 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefi ...

  6. JavaWeb chapter6 对象作用域

    1.  对象属性所在作用域:谁能看到并使用这个属性,以及它能存活多久. 2.  应用上下文ServletContext对象作用域: 对于整个Web应用,只有一个ServletContext对象,而且在 ...

  7. IntelliJ IDEA 使用总结

    IntelliJ IDEA 使用总结 http://my.oschina.net/xianggao/blog/97539 IntelliJ IDEA 问题解决:1.乱码,主要是快捷键的字样显示乱码 中 ...

  8. Android - 定时服务 - Timer

    注:在项目中,有时可能会有一些定时执行的任务,这时,一般都会在一个service中写一个定时器. 例: Service类: import java.util.Timer; import java.ut ...

  9. 新手入门之GDB调试

    写这篇文章算是对最近两天工作的一个经验总结吧. 要让可执行文件比较方便地在DGB上调试,在用gcc编译的时候要使用-g选项. 如何使用GDB启动被调试程序? "gdb path_to_deb ...

  10. mysql插入数据后返回自增ID的方法

    mysql和oracle插入的时候有一个很大的区别是,oracle支持序列做id,mysql本身有一个列可以做自增长字段,mysql在插入一条数据后,如何能获得到这个自增id的值呢? 方法一是使用la ...