<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. PHP基础示例:用PHP+Mysql编写简易新闻管理系统[转]

    实现目标:使用php和mysql操作函数实现一个新闻信息的发布.浏览.修改和删除操作 实现步骤: 一.创建数据库和表 1.创建数据库和表:newsdb 2.创建表格:news 字段:新闻id,标题,关 ...

  2. PHP的三种输出方式

    (1)echo 是PHP语句,没有返回值,用于输出一个或多个字符串 (2)print() 是函数,可以有返回值,只能打印出简单类型变量的值,例如int.string (3)print_r() 是函数, ...

  3. Spring 整合 Hibernate

    Spring 整合 Hibernate •Spring 支持大多数流行的 ORM 框架, 包括 Hibernate JDO, TopLink, Ibatis 和 JPA. •Spring 对这些 OR ...

  4. Ubuntu gmake: command not found

    由于ubuntu上取消了gmake(GUNmake)的而全部使用make代替.所以此问题的解决方式是有两种: 1.makefile中 gmake用make代替: 2.创建一个make的gmake连接: ...

  5. hdu 2065

    ps:我的天...看网上各种难..对于我这个比较懒得人...我就找规律直接水过去了...前20一个循环,注意跳过第一轮的3个数就行..然后觉得比较坑的是,那个输入N,要用long long型... 代 ...

  6. cassandra中对节点失败与否的探测方法， the Phi accrual Failure Dector，附论文

    (1)在分布式系统中,对于某个节点是否还“活着”的探测,通常是设定一个时间的阀值,然后根据接收到的“心跳”信息的间隔,来判定这个节点是否还活着,然后返回一个bool值: 但这种做法很容易造成误判:因为 ...

  7. hadoop优化之拙见

    map-reduce的优化: 需要内存的地方:  map/reduce任务运行时内存.存放中间数据的内存缓存区.map输出数据排序内存, 需要操作磁盘的地方: map输出数据缓冲区达到阀值的溢出写文件 ...

  8. Unity3D DllNotFoundException/System.DllNotFoundException

    Unity System.DllNotFoundException Unity Fallback handler could not load library D:/91yGame/SparrowCD ...

  9. iTunesConnect进行App转移

    最近有客户提出需求,要把发布的OEM应用转移到自己的账户下,查询未果,在网站上搜索,死活找不到对应的选项,这两天看之前提交的版本已经审核通过了,发现很容易的就找到了转移版本的地方. 仔细思量,应该是之 ...

  10. android使用Webview上传图片

    package com.example.webview; import java.io.File; import android.net.Uri;import android.os.Bundle;im ...