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实现各种进度条样式详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 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
You might like
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
Node.js文件操作详解
2014/08/16 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
angular分页指令操作
2017/01/09 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python实现结构体代码实例
2020/02/10 Python
使用Python实现批量ping操作方法
2020/05/06 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
python 如何停止一个死循环的线程
2020/11/24 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
什么是反射
2012/03/17 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
大家访活动实施方案
2014/03/10 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
企业务虚会发言材料
2014/10/20 职场文书
2014年学校财务工作总结
2014/12/06 职场文书