编程 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 相关文章推荐

彻底搞懂JS无缝滚动代码

Jan 03 Javascript

jqPlot jquery的页面图表绘制工具

Jul 25 Javascript

让div层随鼠标移动的实现代码 ie ff

Dec 18 Javascript

JavaScript实现判断图片是否加载完成的3种方法整理

Mar 13 Javascript

轻量级的原生js日历插件calendar.js使用指南

Apr 28 Javascript

js实现简单秒表走动的时钟特效

Mar 25 Javascript

JavaScript实现简洁的俄罗斯方块完整实例

Mar 01 Javascript

jQuery的Each比JS原生for循环性能慢很多的原因

Jul 05 Javascript

jquery easyUI中ajax异步校验用户名

Aug 19 Javascript

js实现表格筛选功能

Jan 18 Javascript

JavaScript闭包的简单应用

Sep 01 Javascript

零基础之Node.js搭建API服务器的详解

Mar 08 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/04/12 PHP

Firefox getBoxObjectFor getBoundingClientRect联系

2008/10/26 Javascript

jquery animate实现鼠标放上去显示离开隐藏效果

2013/07/21 Javascript

js原型继承的两种方法对比介绍

2014/03/30 Javascript

jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)

2016/05/27 Javascript

常用Javascript函数与原型功能收藏(必看篇)

2016/10/09 Javascript

整理关于Bootstrap导航的慕课笔记

2017/03/29 Javascript

jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】

2017/04/10 jQuery

自定义事件解决重复请求BUG的问题

2017/07/11 Javascript

javascript观察者模式实现自动刷新效果

2017/09/05 Javascript

bootstrap表格内容过长时用省略号表示的解决方法

2017/11/21 Javascript

jQuery实现每隔一段时间自动更换样式的方法分析

2018/05/03 jQuery

JS实现百度网盘任意文件强制下载功能

2018/08/31 Javascript

JavaScript实现表单注册、表单验证、运算符功能

2018/10/15 Javascript

JS数据类型STRING使用实例解析

2019/12/18 Javascript

vue基于better-scroll实现左右联动滑动页面

2020/06/30 Javascript

浅析 Vue 3.0 的组装式 API（一）

2020/08/31 Javascript

使用jquery实现轮播图效果

2021/01/02 jQuery

[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28

2020/10/28 DOTA

Python中除法使用的注意事项

2014/08/21 Python

Python常用知识点汇总

2016/05/08 Python

pyecharts绘制中国2020肺炎疫情地图的实例代码

2020/02/12 Python

python3通过qq邮箱发送邮件以及附件

2020/05/20 Python

TensorFlow Autodiff自动微分详解

2020/07/06 Python

Python OpenCV中的numpy与图像类型转换操作

2020/12/11 Python

python 下载文件的几种方法汇总

2021/01/06 Python

CSS3实现千变万化的文字阴影text-shadow效果设计

2016/04/26 HTML / CSS

Oroton中国官网：澳洲知名奢侈配饰品牌

2017/03/26 全球购物

求职自荐信格式

2013/12/04 职场文书

门卫班长岗位职责

2013/12/15 职场文书

电子商务助理求职自荐信

2014/04/10 职场文书

团支书竞选演讲稿

2014/04/28 职场文书

初中国旗下的演讲稿

2014/08/28 职场文书

上课随便讲话检讨书

2014/09/12 职场文书

自考生自我评价

2019/06/21 职场文书

python 离散点图画法的实现

2022/04/01 Python