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

javascript 闭包疑问

Dec 30 Javascript

jQuery focus和blur事件的应用详解

Jan 26 Javascript

使用js画图之饼图

Jan 12 Javascript

JavaScript的Number对象的toString()方法

Dec 18 Javascript

浅谈JS中的bind方法与函数柯里化

Aug 10 Javascript

Node.js环境下Koa2添加travis ci持续集成工具的方法

Jun 19 Javascript

JavaScript创建对象的七种方式全面总结

Aug 21 Javascript

Electron-vue脚手架改造vue项目的方法

Oct 22 Javascript

vue实现计算器功能

Feb 22 Javascript

查找Vue中下标的操作(some和findindex)

Aug 12 Javascript

仿照Element-ui实现一个简易的$message方法

Sep 14 Javascript

基于JQuery和DWR实现异步数据传递

Oct 16 jQuery

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

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实现维护文件代码

2007/06/14 PHP

php中使用addslashes函数报错问题的解决方法

2013/02/06 PHP

PHP 利用Mail_MimeDecode类提取邮件信息示例

2014/01/26 PHP

Laravel 关联模型-关联新增和关联更新的方法

2019/10/10 PHP

laravel 解决多库下的DB::transaction()事务失效问题

2019/10/21 PHP

php的instanceof和判断闭包Closure操作示例

2020/01/26 PHP

Js的MessageBox

2006/12/03 Javascript

基于jquery的一个图片hover的插件

2010/04/24 Javascript

JavaScript对象和字串之间的转换实例探讨

2013/04/21 Javascript

JS+CSS实现实用的单击输入框弹出选择框的方法

2015/02/28 Javascript

js实现简单计算器

2015/11/22 Javascript

Javascript类型系统之String字符串类型详解

2016/06/21 Javascript

80%应聘者都不及格的JS面试题

2017/03/21 Javascript

详解Angular的8个主要构造块

2017/06/20 Javascript

详解VUE 对element-ui中的ElTableColumn扩展

2018/03/28 Javascript

微信小程序实现工作时间段选择

2019/02/15 Javascript

Angular2实现的秒表及改良版示例

2019/05/10 Javascript

jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】

2019/06/06 jQuery

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

2019/12/18 Javascript

python正则表达式之作业计算器

2016/03/18 Python

python使用Apriori算法进行关联性解析

2017/12/21 Python

python 集合并集、交集 Series list set 转换的实例

2018/05/29 Python

Python爬取qq空间说说的实例代码

2018/08/17 Python

python调用并链接MATLAB脚本详解

2019/07/05 Python

django删除表重建的实现方法

2019/08/28 Python

python else语句在循环中的运用详解

2020/07/06 Python

matplotlib对象拾取事件处理的实现

2021/01/14 Python

罗兰·穆雷官网：Roland Mouret

2018/09/28 全球购物

LN-CC日本：高端男装和女装的奢侈时尚目的地

2019/09/01 全球购物

《难忘的泼水节》教学反思

2014/02/27 职场文书

优秀护士先进事迹

2014/05/08 职场文书

2014医学院领导班子对照检查材料思想汇报

2014/09/19 职场文书

Redis Cluster 字段模糊匹配及删除

2021/05/27 Redis

python字典进行运算原理及实例分享

2021/08/02 Python

Python+Tkinter打造签名设计工具

2022/04/01 Python

Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法

2022/09/23 数码科技