Bootstrap 各种进度条详解

一：默认的进度条

创建一个基本的进度条的步骤如下：

添加一个带有 class .progress 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

让我们看看下面的实例：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="60"

    aria-valuemin="0" aria-valuemax="100" style="width: 40%;">

    <span class="sr-only">40% 完成</span>

    </div>

    </div>

    </body>

    </html>

结果如下所示：

二：交替的进度条

创建不同样式的进度条的步骤如下：

添加一个带有 class .progress 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

让我们看看下面的实例：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 交替的进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress">

    <div class="progress-bar progress-bar-success" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 90%;">

    <span class="sr-only">90% 完成（成功）</span>

    </div>

    </div>

    <div class="progress">

    <div class="progress-bar progress-bar-info" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 30%;">

    <span class="sr-only">30% 完成（信息）</span>

    </div>

    </div>

    <div class="progress">

    <div class="progress-bar progress-bar-warning" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 20%;">

    <span class="sr-only">20% 完成（警告）</span>

    </div>

    </div>

    <div class="progress">

    <div class="progress-bar progress-bar-danger" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 10%;">

    <span class="sr-only">10% 完成（危险）</span>

    </div>

    </div>

    </body>

    </html>

结果如下所示：

三：条纹的进度条

创建一个条纹的进度条的步骤如下：

添加一个带有 class .progress 和 .progress-striped 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

让我们看看下面的实例：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 条纹的进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress progress-striped">

    <div class="progress-bar progress-bar-success" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 90%;">

    <span class="sr-only">90% 完成（成功）</span>

    </div>

    </div>

    <div class="progress progress-striped">

    <div class="progress-bar progress-bar-info" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 30%;">

    <span class="sr-only">30% 完成（信息）</span>

    </div>

    </div>

    <div class="progress progress-striped">

    <div class="progress-bar progress-bar-warning" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 20%;">

    <span class="sr-only">20% 完成（警告）</span>

    </div>

    </div>

    <div class="progress progress-striped">

    <div class="progress-bar progress-bar-danger" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 10%;">

    <span class="sr-only">10% 完成（危险）</span>

    </div>

    </div>

    </body>

    </html>

结果如下所示：

四：动画的进度条

创建一个动画的进度条的步骤如下：

添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

这将会使条纹具有从右向左的运动感。

让我们看看下面的实例：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 动画的进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress progress-striped active">

    <div class="progress-bar progress-bar-success" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 40%;">

    <span class="sr-only">40% 完成</span>

    </div>

    </div>

    </body>

    </html>

结果如下所示：

五：堆叠的进度条

您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠，如下面的实例所示：

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap 实例 - 堆叠的进度条</title>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="/scripts/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="progress">

    <div class="progress-bar progress-bar-success" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 40%;">

    <span class="sr-only">40% 完成</span>

    </div>

    <div class="progress-bar progress-bar-info" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 30%;">

    <span class="sr-only">30% 完成（信息）</span>

    </div>

    <div class="progress-bar progress-bar-warning" role="progressbar"

    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

    style="width: 20%;">

    <span class="sr-only">20% 完成（警告）</span>

    </div>

    </div>

    </body>

    </html>

结果如下所示：

Bootstrap 各种进度条详解的更多相关文章

两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
27.QT-QProgressBar动态实现多彩进度条(详解)
如下图所示: 效果如下: (gif录制的动画效果不好,所以颜色有间隙) 介绍通过qss实现,只需要一个多彩背景图,通过QImage获取颜色,然后来设置进度条,便可以实现动态多彩进度条(根据图片设定颜 ...
转载 JS组件Bootstrap Select2使用方法详解
JS组件Bootstrap Select2使用方法详解作者:懒得安分字体:[增加减小] 类型:转载时间:2016-01-26我要评论这篇文章主要为大家介绍了JS组件Bootstrap Sel ...
Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
Bootstrap各种进度条的实例讲解
本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用bootstrap教程.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Interne ...
Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果.  <div class="well">Bootstrap</div& ...
Bootstrap学习进度条
本文将介绍Bootstrap进度条,在本文中你将看到如何使用Bootstrap创建加载,重定向或动作状态的进度条 bootstrap进度条使用CSS3过渡和动画来获得该效果.Internet Expl ...
bootstrap组件---进度条
<div class="progress"> <div class="progress-bar progress-bar-success" r ...
Bootstrap Table 表格参数详解
表格参数名称标签类型默认描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-class ...

随机推荐

Dell 服务器阵列扩容【经验分享(转)】
看到论坛有朋友发帖询问Dell服务器的扩容,索性整理下之前做的文档,发出来和大家做个分享. 做之前给大家提醒2个注意点:①请做好数据备份,相同于HP.IBM,该扩容过程是不可逆的.②本扩容方法支持同级 ...
Android——ContentProvider
xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...
[开发笔记]-实现winform半透明毛玻璃效果
亲测win7下可用,win8下由于系统不支持Aero效果,所以效果不是半透明的. 代码: 博客园插入不了代码了..... public partial class Form1 : Form { int ...
创建function实现hive表结果导出到mysql
1. 创建临时function (这里两个包都是hive自带的,不需要自己开发的,可以根据名称查找对应的版本) add jar /opt/local/hive/lib/hive-contrib-.ja ...
Sencha Touch 2.3 自定义主题皮肤,颜色
写博客园越来越懒了,只写重点部分,不明白的可以Q我. 1.当你通过Cmd生成项目之后,App\resources\sass就是我们的样式源文件 2.想自定义自己的样式分为两种方式扩展:这个是基于st ...
Telegraf+InfluxDB+Grafana快速搭建实时监控系统监控postgresql
Telegraf+InfluxDB+Grafana快速搭建实时监控系统监控postgresql
Web API（六）：使用Autofac实现依赖注入
在这一篇文章将会讲解如何在Web API2中使用Autofac实现依赖注入. 一.创建实体类库 1.创建单独实体类创建DI.Entity类库,用来存放所有的实体类,新建用户实体类,其结构如下: us ...
Java设计模式（1）工厂模式（Factory模式）
工厂模式定义:提供创建对象的接口. 为何使用工厂模式工厂模式是我们最常用的模式了,著名的Jive论坛,就大量使用了工厂模式,工厂模式在Java程序系统可以说是随处可见. 为什么工厂模式是如此常用?因 ...
JS Window对象操作思维导图
[maven] 项目不同环境自动打包
应用背景项目需要发布到本地环境,测试环境和生产环境甚至不同的生产环境上.这时候配置文件的一些参数需要被频繁的修改来修改去.为了解决这样的繁琐工作,就得使用maven profile特性. 步骤 1. ...

Bootstrap 各种进度条详解

一：默认的进度条

二：交替的进度条

三：条纹的进度条

四：动画的进度条

五：堆叠的进度条

Bootstrap 各种进度条详解的更多相关文章

随机推荐

热门专题