Bootstrap进度条学习使用
作者：轻扰时光 时间：2024-04-18 09:28:31
本文实例为大家分享了Bootstrap进度条的具体实现代码，供大家参考，具体内容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
<div class="container">
<div class="row">
<div class="progress"><!--进度条-->
<div class="progress-bar" style="width:60％">60％</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:40％">40％</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:80％">80％</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:75％">75％</div>
</div>
<!--带条纹的动态的进度条-->
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width:68％">68％</div>
</div>
<!--带堆叠效果的进度条-->
<div class="progress">
<div class="progress-bar" style="width:10％">10％</div>
<div class="progress-bar progress-bar-danger" style="width:10％">40％</div>
<div class="progress-bar progress-bar-info" style="width:20％">80％</div>
<div class="progress-bar progress-bar-warning" style="width:30％">75％</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width:20％">20％</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
效果图：
标签：Bootstrap,进度条
0
投稿猜你喜欢
深入浅析Python数据分析的过程记录
2022-05-04 02:56:27
php获取当前时间的毫秒数的方法
2023-06-28 06:43:37
golang实现各种情况的get请求操作
2024-04-25 15:30:15
聊聊python中的load、loads实现反序列化的问题
2023-07-20 04:38:52
将字典转换为DataFrame并进行频次统计的方法
2023-11-21 05:37:30
Python3压缩和解压缩实现代码
2022-05-04 09:42:19
Django contrib auth authenticate函数源码解析
2022-04-27 01:49:23
pytorch中使用cuda扩展的实现示例
2021-02-17 23:46:55
解析arp病毒背后利用的Javascript技术
2007-08-08 09:55:00
Centos 7下使用RPM包安装MySQL 5.7.9教程
2024-01-19 20:44:49
使用AJAX和Django获取数据的方法实例
2021-11-14 20:40:20
tf.concat中axis的含义与使用详解
2021-05-21 12:38:00
删除数据库中重复数据的两个方法
2008-01-01 19:16:00
python3中pip3安装出错,找不到SSL的解决方式
2022-02-15 23:33:17
Node.js基础模块babel使用详解
2024-05-13 09:35:11
PHP 截取字符串函数整理(支持gb2312和utf-8)
2024-05-11 10:03:32
python 中os模块os.path.exists()的用法说明
2022-04-30 01:22:26
python掌握字符串只需这一篇就够了
2023-01-09 03:39:10
python windows安装cuda+cudnn+pytorch教程
2023-02-04 04:35:02
Python之字典对象的几种创建方法
2023-04-28 13:15:57