Bootstrap的进度条效果

news2025/7/19 16:52:19

在Bootstrap中，进度条一般由嵌套的两层结构标签构成，外层标签引入类progress，用来形成进度槽；内层标签引入类progress-bar，用来设计进度条。

目录

  • 01-最基本的进度条效果
  • 02-为进度条添加文本
  • 03-设置进度条的高度
  • 04-设置进度条的背景色
  • 05-设计进度条的样式和风格
    • 05-1-一个进度槽中包含多个进度条
    • 05-2-条纹(波纹)进度条
    • 05-3-动画条纹条效果

01-最基本的进度条效果

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">进度条</h3>
<div class="progress">
    <div class="progress-bar w-25"></div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-50"></div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-75"></div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

02-为进度条添加文本

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>为进度条添加文本</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">为进度条添加文本</h3>
<div class="progress">
    <div class="progress-bar w-25">25%</div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-50">50%</div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-75">75%</div>
</div>
</body>
</html>

效果如下：
在这里插入图片描述

03-设置进度条的高度

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置进度条的高度</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置进度条的高度</h3>
<!--默认高度-->
<div class="progress">
    <div class="progress-bar w-50">75%</div>
</div><br/>
<!--设置进度条的高度为40px-->
<div class="progress" style="height:40px">
    <div class="progress-bar w-50">50%</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

04-设置进度条的背景色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置进度条的背景色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置进度条的背景色</h3>
<div class="progress">
    <div class="progress-bar bg-success" style="width: 25%"></div>
</div><br/>
<div class="progress">
    <div class="progress-bar bg-info" style="width: 50%"></div>
</div><br/>
<div class="progress">
    <div class="progress-bar bg-warning" style="width: 75%"></div>
</div><br/>
<div class="progress">
    <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

05-设计进度条的样式和风格

05-1-一个进度槽中包含多个进度条

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多进度条进度</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4 align="center">多进度条进度</h4>
<div class="progress">
    <div class="progress-bar" style="width:20%;">20%</div>
    <div class="progress-bar bg-warning" style="width: 40%;">40%</div>
    <div class="progress-bar bg-info" style="width: 20%;">20%</div>
    <div class="progress-bar bg-danger " style="width: 20%;">20%</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

05-2-条纹(波纹)进度条

可以利用类 progress-bar-striped 实现-条纹(波纹)进度条的效果。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>条纹进度条</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">条纹进度条</h3>
<div class="progress">
    <div class="progress-bar w-25 progress-bar-striped">25%</div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-50 progress-bar-striped">50%</div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-75 progress-bar-striped">75%</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

05-3-动画条纹条效果

利用类 progress-bar-animated 可以实现 动画条纹条效果
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画条纹进度条</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">动画条纹进度条</h3>
<div class="progress">
    <div class="progress-bar w-25 bg-success progress-bar-striped progress-bar-animated"></div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-50 bg-info progress-bar-striped progress-bar-animated"></div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-75 bg-warning progress-bar-striped progress-bar-animated"></div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-100 bg-danger progress-bar-striped progress-bar-animated"></div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述
注意：上面是截图，实际上的效果为波纹不断在滚动。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1102582.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【c语言】编译链接--详解

【c语言】编译链接--详解

文章目录 一.程序的翻译环境和运行环境二.翻译环境&#xff1a;预编译编译汇编链接&#xff08;一&#xff09;预编译&#xff08;二&#xff09;编译1&#xff09;词法分析2&#xff09;语法分析3&#xff09;语义分析 &#xff08;三&#xff09;汇编(四&#xff09;链接1.编…
阅读更多...
FDTD Solutions笔记

FDTD Solutions笔记

FDTD Solutions笔记 目录使用流程实例 目录 使用流程 实例 材料条件 步骤 基底 2. 添加规则膜层 3. 添加仿真区 解释&#xff1a; 仿真区为&#xff08;0,0&#xff09;&#xff0c;x方向为0.4&#xff0c;y方向是1 解释&#xff1a; 一般先用低精度进行计算 解释&#xff1a…
阅读更多...
【汇编语言特别篇】DOSBox及常用汇编工具的详细安装教程

【汇编语言特别篇】DOSBox及常用汇编工具的详细安装教程

文章目录 &#x1f4cb;前言一. ⛳️dosbox的介绍、下载和安装1.1 &#x1f514;dosbos简介1.2 &#x1f514;dosbox的下载1.2.1 &#x1f47b;方式一&#xff1a;官网下载(推荐)1.2.2 &#x1f47b;方式二&#xff1a;网盘安装包 1.3 &#x1f514;dosbox的安装1.4 &#x1f5…
阅读更多...
Git GUI使用笔记

Git GUI使用笔记

看这个视频 Git GUI基本使用_哔哩哔哩_bilibili 1 下载 Git-2.42.0.2-64Window64位安装包-最新版资源-CSDN文库 安装软件就一路next就可以 2 配置 空白处右键&#xff0c;选择Open Git Bash here &#xff0c;输入下面两行配置信息 git config --global user.name "Y…
阅读更多...
OJ第四篇

OJ第四篇

文章目录 链表分割环形链表有效的括号 链表分割 链接: 链表分割 虽然这个题牛客网中只有C,但是无所谓&#xff0c;我们只要知道C是兼容C的就可以了 至于说这个题的思路&#xff0c;我们就弄两个链表&#xff0c;把小于x的结点放到一个链表中&#xff0c;剩下的放到另一个链表…
阅读更多...
excel导出-将后端返回的文件流导出为excel

excel导出-将后端返回的文件流导出为excel

有的业务场景&#xff0c;需要前端自己将文本流导出为excel有的是后端返回的文本流&#xff0c;有的是调用上传组件后&#xff0c;前端组件生成的文本流&#xff0c;组件上传后点击上传的文件名&#xff0c;要求实现下载功能&#xff0c;这时的导出就需要前端自己处理了 直接上…
阅读更多...
百度文心一言 4.0 ：如何申请百度文心一言 4.0

百度文心一言 4.0 ：如何申请百度文心一言 4.0

本心、输入输出、结果 文章目录 百度文心一言 4.0 &#xff1a;如何申请百度文心一言 4.0前言如何申请千帆大模型试用百度文心一言 4.0 主要功能介绍配套发布的十余款AI原生应用插件、API 生态 百度世界大会回顾弘扬爱国精神 百度文心一言 4.0 &#xff1a;如何申请百度文心一言…
阅读更多...
ubuntu20.04 nerf开山之作

ubuntu20.04 nerf开山之作

源码 GitHub - yenchenlin/nerf-pytorch: A PyTorch implementation of NeRF (Neural Radiance Fields) that reproduces the results. 代码的相关解读 NeRF代码解读-相机参数与坐标系变换 - 知乎 原文题目&#xff1a;NeRF: Representing Scenes as Neural Radiance Field…
阅读更多...
架构师选择题--软件架构设计

架构师选择题--软件架构设计

架构师选择题--软件架构设计 真题 真题 c 中间件分为5类&#xff1a; 交互是最基本的功能 b 公共服务&#xff1a;可复用的服务 b c 微服务去中心化 面向服务集中式 d 架构的组成&#xff1a; 构件 , 连接件 , 约束规则 做为部署单元拆分没有意义 a 接口是已经命名的一组操…
阅读更多...
Xftp和Xshell的使用

Xftp和Xshell的使用

目录 Xftp和Xshell的区别 Xftp安装教程、使用Xftp进行远程文件传输 一、Xftp安装教程 二、使用Xftp进行远程文件传输 三、连接至服务器 四、从 windows -> 服务器 传输文件 .Xshell安装教程、使用Xshell进行Linux远程登录 什么是xshell 一、远程登录的意义 二、…
阅读更多...
微控制器中的晶振电路

微控制器中的晶振电路

文章目录 1234567 1 2 3 4 5 6 7
阅读更多...
Redis命令

Redis命令

一、数据结构介绍。 redis是一个key-value的数据库&#xff0c;key一般是string&#xff0c;但是value有很多种类型。包括&#xff1a; 字符串&#xff08;String&#xff09;&#xff1a;字符串是 Redis 最基础的数据结构之一&#xff0c;可以存储字符串、整数或浮点数。 哈…
阅读更多...
JDBC增删改查示例

JDBC增删改查示例

数据库表 CREATE TABLE customers ( id int NOT NULL AUTO_INCREMENT, name varchar(15) DEFAULT NULL, email varchar(20) DEFAULT NULL, birth date DEFAULT NULL, photo mediumblob, PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT39 DEFAULT CHARSETgb2312;…
阅读更多...
Redis 面试必备 全知识点思维导图

Redis 面试必备 全知识点思维导图

脑图下载地址&#xff1a;https://mm.edrawsoft.cn/mobile-share/index.html?uuidcf5bf135744412-src&share_type1 事务 定义 事务是一个单独的隔离操作,事务中的所有操作都将序列化,有顺序的执行,事务执行的过程中不会被其他客服端发来的命令打断 作用 串联多个命令防…
阅读更多...
【兔子王赠书第2期】《案例学Python（基础篇）》

【兔子王赠书第2期】《案例学Python（基础篇）》

文章目录 前言推荐图书本书特色本书目录本书样章本书读者对象粉丝福利丨评论免费赠书尾声 前言 随着人工智能和大数据的蓬勃发展&#xff0c;Python将会得到越来越多开发者的喜爱和应用。身边有很多朋友都开始使用Python语言进行开发。正是因为Python是一门如此受欢迎的编程语…
阅读更多...
下载Jakarta

下载Jakarta

百度找到Jakarta的官网 https://jakarta.ee/zh/ 打开后在右上角有这两个按钮 其中starter按钮是 提供helloworld的&#xff0c;也就是【初体验】&#xff0c;可以根据版本号&#xff0c;jdk版本定制hello world&#xff1b; 另一个Download是下载【兼容产品】&#xff0c;点进…
阅读更多...
Python合并多个相交矩形框

Python合并多个相交矩形框

Python合并多个相交矩形框 前言前提条件相关介绍实验环境Python合并多个相交矩形框代码实现 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;敬请批评改正。更多精彩内容&#xff0c;可点击进入Python日常小操作专栏、YOLO系列专栏、自然语言处理专栏或我的个人主页…
阅读更多...
小程序设计基本微信小程序的旅游社系统

小程序设计基本微信小程序的旅游社系统

项目介绍 现今市面上有关于旅游信息管理的微信小程序还是比较少的&#xff0c;所以本课题想对如今这么多的旅游景区做一个收集和分类。这样可以给身边喜欢旅游的朋友更好地推荐分享适合去旅行的地方。 前端采用HTML架构&#xff0c;遵循HTMLss JavaScript的开发方式&#xff0…
阅读更多...
自动化测试框架指南

自动化测试框架指南

目录 定义测试自动化 不同类型的框架 以工具为中心的框架 面向项目的框架 关键字驱动的框架 完美测试自动化框架的主要组件 测试库 单元测试 集成和端到端测试 行为驱动开发 测试数据管理 mock&#xff0c;Stubs和虚拟化 实施模式的通用机制 测试结果报告 CI平台…
阅读更多...
SpringBoot+自定义注解+AOP高级玩法打造通用开关

SpringBoot+自定义注解+AOP高级玩法打造通用开关

1.项目结构 2.引入依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot<…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023