Bootstrap中的条纹进度条使用案例

最新推荐文章于 2024-03-05 09:39:29 发布
最新推荐文章于 2024-03-05 09:39:29 发布
阅读量790 收藏
点赞数
分类专栏： 前端 文章标签： Bootstrap
原文链接：https://www.mk2048.com/blog/blog.php?id=jcaajiacb&title=Bootstrap%E4%B8%AD%E7%9A%84%E6%9D%A1%E7%BA%B9%E8%BF%9B%E5%BA%A6%E6%9D%A1%E4%BD%BF%E7%94%A8%E6%A1%88%E4%BE%8B
版权
 创建一个条纹的进度条的步骤如下：

1.添加一个带有 class .progress 和 .progress-striped 的 <div>

2.接着在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是success、info、warning、danger

3.添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置

让我们看看下面的实例：

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 实例 - 条纹的进度条</title>  
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  6.    <script src="/scripts/jquery.min.js"></script>  
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.   
  11. <div class="progress progress-striped">  
  12.    <div class="progress-bar progress-bar-success" role="progressbar"   
  13.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  14.       style="width: 90%;">  
  15.       <span class="sr-only">90% 完成（成功）</span>  
  16.    </div>  
  17. </div>  
  18. <div class="progress progress-striped">  
  19.    <div class="progress-bar progress-bar-info" role="progressbar"  
  20.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  21.       style="width: 30%;">  
  22.       <span class="sr-only">30% 完成（信息）</span>  
  23.    </div>  
  24. </div>  
  25. <div class="progress progress-striped">  
  26.    <div class="progress-bar progress-bar-warning" role="progressbar"   
  27.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  28.       style="width: 20%;">  
  29.       <span class="sr-only">20% 完成（警告）</span>  
  30.    </div>  
  31. </div>  
  32. <div class="progress progress-striped">  
  33.    <div class="progress-bar progress-bar-danger" role="progressbar"   
  34.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  35.       style="width: 10%;">  
  36.       <span class="sr-only">10% 完成（危险）</span>  
  37.    </div>  
  38. </div>  
  39.   
  40. </body>  
  41. </html>  

结果如下所示：
前端老码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 滚动 进度条_进度条--动态条纹进度条
weixin_39612058的博客
12-19 548
使用方法：在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：实现原理：为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就...
Bootstrap 条纹进度条
歪脖先生的博客
03-11 1140
条纹进度条只需给进度条的容器元素追加一个 .progress-striped 类，就可以创建出带条纹的进度条，并且不同颜色的进度条，可以显示不同的条纹：&lt;div class="progress progress-striped"&gt;  &lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt;&lt;/div&gt;效果如图
Bootstrap条纹进度条
歪脖先生的博客
05-22 722
条纹进度条 只需给进度条的容器元素追加一个 .progress-bar-striped类，就可以创建出带条纹的进度条。并且，这种进度条还能根据进度条的颜色，自动显示不同的条纹颜色： <divclass="progress"> <divclass="progress-bar progress-bar-success progress-bar-striped...
css实现一个斑马条纹动画，实现一个理发店门口的小转转，进度条动画同理！
weixin_42178670的博客
12-30 1393
css实现一个斑马条纹动画，实现一个理发店门口的小转转，进度条动画同理！repeat-linear-gradient()和linear-gradient()的实现方式
条形进度条动画效果
xiao970615的博客
02-13 126
echarts，进度条
Bootstrap多彩渐变进度条特效
04-07
在这个特定的案例中，我们关注的是"Bootstrap多彩渐变进度条特效"，这是一种利用Bootstrap框架来创建具有视觉吸引力的、带有渐变颜色的进度条的方法。 首先，我们要理解进度条在网页设计中的作用。进度条通常用于...
bootstrap实现动态进度条效果
12-30
Bootstrap的动态进度条： html: 创建一个modal 这里使用fade先将modal隐藏起来，然后modal里面嵌入progress 代码很简单 <!--窗口声明：--> <!-- 内容声明 -->
使用Bootstrap打造特色进度条效果
08-30
在本篇文章中，我们将探讨如何利用Bootstrap来创建具有特色的进度条效果。 首先，基本的Bootstrap进度条是通过使用`.progress`和`.progress-bar`类来实现的。`<div class="progress">`是外层容器，它应用了 `....
Bootstrap百分比进度条动画特效
06-24
在Bootstrap中，进度条组件是通过`<progress>`元素实现的，可以轻松地定制颜色、大小和动画效果。 在CSS3中，我们可以利用关键帧动画（@keyframes）来创建自定义动画效果。通过设置不同时间点的样式，可以控制元素...
BootStrap 实现各种样式的进度条效果
11-29
在Bootstrap中，进度条（Progress Bar）是一种显示任务进度或指示完成度的有效方式，尤其适用于加载、上传、下载等场景。下面将详细解释如何使用Bootstrap实现各种样式的进度条效果。 1. **基本结构**： Bootstrap...
【前端实例】css实现动态条纹背景进度条
LaoYe的博客
03-05 5542
【一、提出需求】 容器的背景拥有动态效果，看起来就像是在运动着 【二、思路】 结合以往的经验，动态效果其实就是从某一点到指定点或者说某一个值到指定值在指定时间内变化的过程。背景样式中涉及到位置只有 background-position 想要实现背景滚动有两种方式，第一种是通过导入背景图片然后令背景的位置不断发生变化，从而形成滚动效果；第二种就是通过不同颜色的混合令背景的位...
纯css3斑马条纹进度条加载动画效果
ICode联盟
11-24 514
下载地址 实现纯css3代码实现的类似斑马条纹的进度条效果，带动画效果的加载进度条，有很多种颜色任意自定义，当然这只是个加载进度的效果并不是真的百分比进度。 dd:
【Vue】条纹进度条
weixin_45731252的博客
10-28 790
条纹进度条
CSS 斜条纹进度条动画
m0_64491262的博客
06-20 985
CSS 进度条动画样式
使用css 实现渐变色条纹丝滑进度条
最新发布
PhoenixGuangyu的博客
03-05 730
【代码】使用css 实现渐变色条纹丝滑进度条。
利用 element ui 进度条实现渐变 条纹进度条
qq_42423991的博客
04-30 3320
首先 我们看下需要完成的效果 首先可以看到是一个有白色条纹，以及一个渐变色的条纹的进度条 第一部分呢 我们可以先写出这个白色的条纹 我们可以利用以下代码实现白色条纹 ```html ```javascript 在这里插入代码片 ...
CSS 斜条纹进度条
weixin_58031521的博客
09-09 1221
【代码】CSS 斜条纹进度条。
VC++界面编程之--自定义进度条(CProgressBar)皮肤
renstarone的博客
07-03 9566
历史： 我经常在PS设计网站和游戏界面，看到带条纹形状的进度条，看起来比较酷。所以决定实现一个带滚动效果的条纹进度条。 经过一段时间的尝试之后，完成了如下效果图，且是带有滚动效果的。 实现步骤： 1.素材 各大素材网站都有界面素材，比较出名的是站酷，从上面下载一份素材，尝试用PS截取你想要的图片吧。 我下了一份界面素材，如下图： 这些素材都是PSD分层的，可以省去抠图的时间，
Bootstrap进度条使用方法
旋转的紫色星系
08-08 4886
Bootstrap进度条默认样式 当你需要定义一个进度条的时候，我们需要分两个结构进行，第一个是父容器，第二个是进度条，所以类似编码如下：     外层的div作为整个进度条的容器，引入样式progress，内部的div作为进度条整体结构，引入样式progress-bar，从而显示当前进度。 Bootstrap进度条其他样式与按钮元素等样式相同，Bootstrap进度条同样提供了其
bootstrap 锁屏进度条
08-12
要在 Bootstrap 中实现锁屏进度条，你可以使用 Bootstrap 的 Modal 组件和 Progress 组件来实现。 首先，在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件： ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> ``` 然后，创建一个 Modal 来实现锁屏效果： ```html <!-- 锁屏 Modal --> <div class="modal" id="lockScreenModal" tabindex="-1" aria-labelledby="lockScreenModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-body text-center"> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div> </div> </div> </div> </div> </div> ``` 接下来，使用 JavaScript 来控制 Modal 的显示和隐藏： ```javascript // 显示锁屏 Modal $('#lockScreenModal').modal('show'); // 隐藏锁屏 Modal $('#lockScreenModal').modal('hide'); ``` 这样，当你调用 `$('#lockScreenModal').modal('show');` 时，锁屏 Modal 就会显示出来，并带有一个进度条动画。当你调用 `$('#lockScreenModal').modal('hide');` 时，锁屏 Modal 就会隐藏起来。 你可以根据自己的需要自定义 Modal 的内容和样式，进度条的宽度和动画效果等。希望这能帮助到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值