首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onApril 13, 2017

一：默认的进度条

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

  1. 添加一个带有 class .progress 的 <div>。
  2. 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
  3. 添加一个带有百分比表示的宽度的 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实现各种进度条样式详解

二：交替的进度条

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

  1. 添加一个带有 class .progress 的 <div>。
  2. 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
  3. 添加一个带有百分比表示的宽度的 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实现各种进度条样式详解 

三：条纹的进度条

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

  1. 添加一个带有 class .progress 和 .progress-striped 的 <div>。
  2. 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
  3. 添加一个带有百分比表示的宽度的 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实现各种进度条样式详解

四：动画的进度条

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

  1. 添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
  2. 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
  3. 添加一个带有百分比表示的宽度的 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 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
js控制input输入字符解析
Dec 27 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
Aug 30 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
微信小程序 本地数据存储实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 #Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 #Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 #Javascript
angularjs指令之绑定策略（@、=、&amp;）
Apr 13 #Javascript
从零开始学习Node.js系列教程六：EventEmitter发送和接收事件的方法示例
Apr 13 #Javascript
详解angularJs指令的3种绑定策略
Apr 13 #Javascript
实习报告(1) RP-F11(1) 数调机(1) 频偏(1) 手调机(1) TOSHIBA(1) 灵敏度(1) 频率(1) 鉴频器(1) 高放电路(1)
You might like
谈谈PHP语法(2)
2006/10/09 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP数组相关函数汇总
2015/03/24 PHP
详解PHP中的PDO类
2015/07/06 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
用Javascript 和 CSS 实现脚注（Footnote）效果
2009/09/09 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
python 网络编程常用代码段
2016/08/28 Python
python方向键控制上下左右代码
2018/01/20 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
python爬虫之自制英汉字典
2019/06/24 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python list运算操作代码实例解析
2020/01/20 Python
Python Map 函数的使用
2020/08/28 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
怎样声明接口
2014/09/19 面试题
往来会计岗位职责
2013/12/19 职场文书
2014年教研室工作总结
2014/12/06 职场文书
助学感谢信范文
2015/01/21 职场文书