全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：400-708-3566

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

一：默认的进度条

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

  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>

结果如下所示：

 

二：交替的进度条

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

  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>

结果如下所示：

 

三：条纹的进度条

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

  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>

结果如下所示：

 

四：动画的进度条

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

  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>

结果如下所示：

 

五：堆叠的进度条

您甚至可以堆叠多个进度条。把多个进度条放在相同的 .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每天必学之进度条  # BootStrap Progressbar 实现大文件上传的进度条的实例代码  # bootstrap实现动态进度条效果  # BootStrap 实现各种样式的进度条效果  # BootStrap初学者对弹出框和进度条的使用感觉  # Spring Boot+AngularJS+BootStrap实现进度条示例代码  # bootstrap多种样式进度条展示  # BootStrap组件之进度条的基本用法  # Bootstrap进度条实现代码解析  # jquery 简单的进度条实现代码  # 分享8款优秀的 jQuery 加载动画和进度条插件  # bootstrap+jQuery实现的动态进度条功能示例  # 所示  # 让我们  # 在上面  # 创建一个  # 多个  # 放在  # 会使  # 这将  # 大家多多  # html  # head  # title  # DOCTYPE  # xhtml  # brush  # rel  # min  # nofollow  # external 


相关文章： 如何在Golang中使用encoding/gob序列化对象_存储和传输数据  在线教育网站制作平台,山西立德教育官网？  建站之星Pro快速搭建教程：模板选择与功能配置指南  中山网站推广排名,中山信息港登录入口？  建站之星如何通过成品分离优化网站效率？  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  广州美橙建站如何快速搭建多端合一网站？  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  油猴 教程,油猴搜脚本为什么会网页无法显示？  定制建站方案优化指南：企业官网开发与建站费用解析  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  公司网站制作需要多少钱,找人做公司网站需要多少钱？  建站上传速度慢？如何优化加速网站加载效率？  如何在建站之星绑定自定义域名？  如何在橙子建站上传落地页？操作指南详解  如何在自有机房高效搭建专业网站？  南京做网站制作公司,南京哈发网络有限公司，公司怎么样，做网页美工DIV+CSS待遇怎么样？  建站之星备案流程有哪些注意事项？  c# 在ASP.NET Core中管理和取消后台任务  如何快速上传建站程序避免常见错误？  建站主机服务器选型指南与性能优化方案解析  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  寿县云建站：智能SEO优化与多行业模板快速上线指南  建站主机选哪种环境更利于SEO优化？  网站制作知乎推荐,想做自己的网站用什么工具比较好？  武汉网站制作费用多少,在武汉武昌，建面100平方左右的房子，想装暖气片，费用大概是多少啊？  打鱼网站制作软件,波克捕鱼官方号怎么注册？  已有域名能否直接搭建网站？  建站之星北京办公室：智能建站系统与小程序生成方案解析  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  高端建站如何打造兼具美学与转化的品牌官网？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  如何通过二级域名建站提升品牌影响力？  常州企业建站如何选择最佳模板？  建站之星好吗？新手能否轻松上手建站？  Bpmn 2.0的XML文件怎么画流程图  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  如何通过虚拟主机空间快速建站？  青岛网站设计制作公司,查询青岛招聘信息的网站有哪些？  如何在企业微信快速生成手机电脑官网？  C++如何将C风格字符串（char*）转换为std::string？（代码示例）  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  想学网站制作怎么学,建立一个网站要花费多少？  为什么Go需要go mod文件_Go go mod文件作用说明  如何在Golang中引入测试模块_Golang测试包导入与使用实践  建站之星3.0如何解决常见操作问题？  山东网站制作公司有哪些,山东大源集团官网？  平台云上自主建站：模板化设计与智能工具打造高效网站  如何通过可视化优化提升建站效果？  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型 

返回目录 在线咨询
上一篇：php函数怎么转换字符串数组_php函数转换字符串数组方法与组合技巧
下一篇：建站程序选择：开源框架与商业软件哪个更适合新手站长？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

©  云南转妮洋科技有限公司 版权所有   滇ICP备2024034437号 
联系电话： 400-708-3566   E-mail：915688610@qq.com
主营业务：网络营销推广、网站SEO优化、网站定制、营销型网站建设、微商城制作、三级分销系统开发
电话沟通
在线客服