编程 Javascript

Bootstrap实现各种进度条样式详解

Posted in Javascript onApril 13, 2017

一：默认的进度条

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

添加一个带有 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="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>

结果如下所示：

Bootstrap实现各种进度条样式详解

二：交替的进度条

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

添加一个带有 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="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>

结果如下所示：

Bootstrap实现各种进度条样式详解

三：条纹的进度条

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

添加一个带有 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="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>

结果如下所示：

Bootstrap实现各种进度条样式详解

四：动画的进度条

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

添加一个带有 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="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>

结果如下所示：

Bootstrap实现各种进度条样式详解

五：堆叠的进度条

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

<!DOCTYPE html>

<html>

<head>

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

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="<a href="http://www.itxm.net/" target="_blank">progressbar</a>"

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

style="width: 20%;">

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

</div>

</div>

 

</body>

</html>

结果如下所示：

Bootstrap实现各种进度条样式详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap实现各种进度条样式详解

- Author -

落叶的博客

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用JTrackBar实现的模拟苹果风格的滚动条

Aug 06 Javascript

js中Image对象以及对其预加载处理示例

Nov 20 Javascript

新增加的内容是如何将div的scrollbar自动移动最下面

Jan 02 Javascript

JavaScript中SetInterval与setTimeout的用法详解

Nov 10 Javascript

jQuery实现的自适应焦点图效果完整实例

Aug 24 Javascript

AngularJS中关于ng-class指令的几种实现方式详解

Sep 17 Javascript

iscroll.js滚动加载实例详解

Jul 18 Javascript

在vue-cli项目中使用bootstrap的方法示例

Apr 21 Javascript

详解js跨域请求的两种方式，支持post请求

May 05 Javascript

Vue中的v-for循环key属性注意事项小结

Aug 12 Javascript

vue.js高德地图实现热点图代码实例

Apr 18 Javascript

Vue实现数据表格合并列rowspan效果

Nov 30 Javascript

微信小程序本地数据存储实例详解

Apr 13 #Javascript

从零开始学习Node.js系列教程之设置HTTP头的方法示例

Apr 13 #Javascript

从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析

Apr 13 #Javascript

JS 插件dropload下拉刷新、上拉加载使用小结

Apr 13 #Javascript

angularjs指令之绑定策略（@、=、&）

Apr 13 #Javascript

从零开始学习Node.js系列教程六：EventEmitter发送和接收事件的方法示例

Apr 13 #Javascript

详解angularJs指令的3种绑定策略

Apr 13 #Javascript

You might like

PHP自定义图片缩放函数实现等比例不失真缩放的方法

2016/08/19 PHP

Laravel Validator 实现两个或多个字段联合索引唯一

2019/05/08 PHP

豆瓣网的jquery代码实例

2008/06/15 Javascript

显示js对象所有属性和方法的函数

2009/10/16 Javascript

jQuery提交多个表单的小例子

2013/06/30 Javascript

提取字符串中年月日的函数代码

2013/11/05 Javascript

jQuery获取Radio,CheckBox选择的Value值(示例代码)

2013/12/12 Javascript

使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

2014/06/05 Javascript

Node.js文件操作详解

2014/08/16 Javascript

node.js集成百度UE编辑器

2015/02/05 Javascript

JS响应鼠标点击实现两个滑块区间拖动效果

2015/10/26 Javascript

RequireJS使用注意细节

2016/05/15 Javascript

angular分页指令操作

2017/01/09 Javascript

Vue.js -- 过滤器使用总结

2017/02/18 Javascript

详解用node编写自己的cli工具

2017/05/23 Javascript

bootstrap select2插件用ajax来获取和显示数据的实例

2018/08/09 Javascript

node.js爬取中关村的在线电瓶车信息

2018/11/13 Javascript

[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路

2016/07/01 DOTA

Python实现结构体代码实例

2020/02/10 Python

使用Python实现批量ping操作方法

2020/05/06 Python

appium+python自动化配置(adk、jdk、node.js)

2020/11/17 Python

python 如何停止一个死循环的线程

2020/11/24 Python

澳大利亚最大的女装零售商：Millers

2017/09/10 全球购物

英国性能汽车零件和发动机配件在线：Maxpeedingrods

2019/11/05 全球购物

Web Service面试题：如何搭建Axis2的开发环境

2012/06/20 面试题

什么是反射

2012/03/17 面试题

化学学院毕业生自荐信范文

2013/12/17 职场文书

自动化专业职业生涯规划书范文

2014/01/16 职场文书

学生会个人自荐书范文

2014/02/12 职场文书

2014年开学第一课活动方案

2014/03/06 职场文书

大家访活动实施方案

2014/03/10 职场文书

反对形式主义、官僚主义、享乐主义和奢靡之风整改措施

2014/09/17 职场文书

乡镇党员干部群众路线对照检查材料思想汇报

2014/09/28 职场文书

公司领导班子对照检查存在问题整改措施

2014/10/02 职场文书

企业务虚会发言材料

2014/10/20 职场文书

2014年学校财务工作总结

2014/12/06 职场文书