首页
所有分类
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 相关文章推荐
js option删除代码集合
Nov 12 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
js实现验证码功能
Jul 24 Javascript
element中table高度自适应的实现
Oct 21 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) 爬虫(2) 存储过程(3) 增删改查(2) MIME(1) LOGO(1) 写入策略(1) binlog(2) 抖音(1) redo log(1)
You might like
用PHP实现小型站点广告管理（修正版）
2006/10/09 PHP
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
一个改进的UBB类
2006/10/09 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php数据序列化测试实例详解
2017/08/12 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
js中function()使用方法
2013/12/24 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
JS实现留言板功能
2017/06/17 Javascript
理解javascript async的用法
2017/08/22 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python实现括号匹配方法详解
2020/02/10 Python
python3 使用traceback定位异常实例
2020/03/09 Python
django 外键创建注意事项说明
2020/05/20 Python
2014新年寄语
2014/01/20 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
李清照的诗词赏析（20首）
2019/08/22 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL