<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. My Game --背景

    在GitHub MyGame clone 代码,添加到配置并新建好的工程中运行下来就可以看到这个画面: 中间的小点是显示的当前触摸点,本文暂不讨论.图中的蓝天是蓝色的 LayerColor this- ...

  2. python leetcode 日记 --Contains Duplicate --217

    题目 Given an array of integers, find if the array contains any duplicates. Your function should retur ...

  3. 2、android Service 详细用法

    定义一个服务 在项目中定义一个服务,新建一个ServiceTest项目,然后在这个项目中新增一个名为MyService的类,并让它继承自Service,完成后的代码如下所示: ? 1 2 3 4 5 ...

  4. 编程技术●Python

    <Python语言入门> 2015-01-16 14:13 ★ 虽然书名叫入门.序里也写了说完全没有编程经验的都可以用这本书来学习入门.不过好像不太适合哦.书很好,内容也挺全面细致的.太好 ...

  5. UML学习笔记2

    4.协作图 它跟顺序图区别:前者强调时间,后者强调空间.两者可以转换 5.状态图 主要用于时间建模 6.活动图 7.构件图

  6. Python 基礎 - pyc 是什麼

    Python2.7 版中,只要執行 .py 的檔案後,即會馬上產生一個 .pyc 的檔案,而在 Python3 版中,執行 .py 的檔案後,即會產生一個叫 __pycache__ 的目錄,裡面也會有 ...

  7. SVD

    SVD分解(奇异值分解),本应是本科生就掌握的方法,然而却经常被忽视.实际上,SVD分解不但很直观,而且极其有用.SVD分解提供了一种方法将一个矩阵拆分成简单的,并且有意义的几块.它的几何解释可以看做 ...

  8. [原创] 用两个stack实现queue的功能

    #include <iostream> #include <stack> using namespace std; class doubleStackToQueue { pri ...

  9. nginx+tomcat集群配置(4)--rewrite规则和多应用根目录设定思路

    前言: nginx中有一块很重要的概念, 就是rewrite规则. 它会对URL进行修改, 然后进行内部的重定向. rewrite授予了nginx更多的自由, 使得后级服务的接入更加地方便. 本文将简 ...

  10. LintCode Balanced Binary Tree

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...