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="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中的条纹进度条使用案例相关推荐

Bootstrap 条纹进度条
条纹进度条只需给进度条的容器元素追加一个 .progress-striped 类,就可以创建出带条纹的进度条,并且不同颜色的进度条,可以显示不同的条纹: <div class="pr ...
Bootstrap条纹进度条
条纹进度条只需给进度条的容器元素追加一个 .progress-bar-striped 类,就可以创建出带条纹的进度条.并且,这种进度条还能根据进度条的颜色,自动显示不同的条纹颜色: <div ...
Adobe Edge Animate --异步条件加载框架（yepnop）：加载bootstrap之按钮、进度条、菜单效果
Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮.进度条.菜单效果版权声明: 原文地址: http://www.cnblogs.com/ado ...
MFC控件 --- 进度条【案例】
打开游戏或者其他一些软件时,时常会看到刚开始时有一个进度条在加载,有点酷炫的感觉.对于MFC进度条的使用,下面用一个案例介绍一下. 案例:进度条单步加载和自动连续加载步骤: 1.按下图在对话框中添加 ...
android 动态改变进度条,Android条纹进度条的实现(调整view宽度仿进度条)
Android条纹进度条的实现(调整view宽度仿进度条) 发布时间:2020-10-03 16:14:24 来源:脚本之家阅读:89 作者:RustFisher 前言本文主要给大家介绍了关于An ...
python tkinter进度条_在python tkinter中Canvas实现进度条显示的方法
如下所示: from tkinter import * import time #更新进度条函数 def change_schedule(now_schedule,all_schedule): can ...
利用 element ui 进度条实现渐变条纹进度条
首先我们看下需要完成的效果首先可以看到是一个有白色条纹,以及一个渐变色的条纹的进度条第一部分呢我们可以先写出这个白色的条纹我们可以利用以下代码实现白色条纹 .el-progress-bar_ ...
android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
【Vue】条纹进度条
一.效果演示及使用作为组件引入到项目(引入地址修改为自己实际的存放地址),注册到components import stripeloading from "@/components/LSU ...

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

Bootstrap中的条纹进度条使用案例相关推荐

最新文章

热门文章