首页
所有分类
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 相关文章推荐
javascript 日期常用的方法
Nov 11 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
详解JavaScript树结构
Jan 09 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
JS变量提升及函数提升实例解析
Sep 03 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) 443(1) shell(3) 压力测试(1) SSL(3) lamp(1) 二级域名(1) 默认端口(3) URL重定向(3) 跨域(4)
You might like
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
DogBuddy荷兰：找到你最完美的狗保姆
2019/04/17 全球购物
英国莱斯特松木橡木家具网上商店：Choice Furniture Superstore
2019/07/05 全球购物
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
合理化建议书
2015/02/04 职场文书
最新农村养殖致富：资金投入较低的创业项目有哪些？
2019/09/26 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python