首页
所有分类
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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
js滚动条多种样式,推荐
Feb 05 Javascript
实例：用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
js判断两个数组相等的5种方法
May 06 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
lnmp(1) lamp(1) 443(1) 前后端分离(1) SSL(3) 跨域(4) Centos(8) 二级域名(1) URL重定向(3) 压力测试(1)
You might like
详细介绍PHP应用提速面面观
2006/10/09 PHP
PHP 的几个配置文件函数
2006/12/21 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
微博@符号的用户名提示效果。(想@到谁？)
2010/11/05 Javascript
javascript 进阶篇1 正则表达式，cookie管理，userData
2012/03/14 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
Node 代理访问的实现
2019/09/19 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴：Balfour
2018/11/01 全球购物
西班牙品牌鞋子、服装和配饰在线商店：Esdemarca
2021/02/17 全球购物
小学毕业感言500字
2014/02/28 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
单位工作证明
2014/10/07 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
学习十八大的感悟
2015/08/11 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
vue项目支付功能代码详解
2022/02/18 Vue.js
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库