学习Bootstrap 5的第七天

news2024/11/15 23:34:31

目录

徽章

徽章

实例

上下文徽章

实例

胶囊徽章

实例

元素内的徽章

实例

进度条

基础进度条

实例

进度条高度

实例

彩色进度条

实例

条纹进度条

实例

动画进度条

实例

混合色彩进度条

实例

徽章

徽章

在 Bootstrap 中，徽章（Badges）是一种用于突出显示新的、更新的或有未读项的元素。它们通常用于通知用户有新的消息、更新或其他需要关注的内容。

使用徽章的基本方式是将 .badge 类添加到一个 <span> 元素上，同时根据需要添加一个背景颜色类，例如 .bg-primary、.bg-secondary、.bg-success 等。注意：徽章会在父元素大小变化时自动调整其大小，这也是一个很方便的特性。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>徽章</h1>
			<h1><span class="badge bg-primary">h1</span></h1>
			<h2><span class="badge bg-primary">h2</span></h1>
			<h3><span class="badge bg-primary">h3</span></h1>
			<h4><span class="badge bg-primary">h4</span></h1>
			<h5><span class="badge bg-primary">h5</span></h1>
			<h6><span class="badge bg-primary">h6</span></h1>
		</div>
	</body>
</html>

运行结果：

上下文徽章

使用任意上下文类 (.bg-*) 来更改徽章的颜色。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
		  <h2>上下文徽章</h2>
		  <span class="badge bg-primary">主要</span>
		  <span class="badge bg-secondary">次要</span>
		  <span class="badge bg-success">成功</span>
		  <span class="badge bg-danger">危险</span>
		  <span class="badge bg-warning">警告</span>
		  <span class="badge bg-info">信息</span>
		  <span class="badge bg-light">浅色</span>
		  <span class="badge bg-dark">深色</span>
		</div>
	</body>
</html>

运行结果：

胶囊徽章

rounded-pill 类在 Bootstrap 中可以用来创建一个圆形的按钮或徽章。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
		  <h2>胶囊徽章</h2>
		  <span class="badge rounded-pill bg-primary">主要</span>
		  <span class="badge rounded-pill bg-secondary">次要</span>
		  <span class="badge rounded-pill bg-success">成功</span>
		  <span class="badge rounded-pill bg-danger">危险</span>
		  <span class="badge rounded-pill bg-warning">警告</span>
		  <span class="badge rounded-pill bg-info">信息</span>
		  <span class="badge rounded-pill bg-light">浅色</span>
		  <span class="badge rounded-pill bg-dark">深色</span>
		</div>
	</body>
</html>

运行结果：

元素内的徽章

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h2>元素内的徽章</h2>
			<button type="button" class="btn btn-primary">
				按钮文本<span class="badge rounded-pill bg-primary">主要</span>
			</button>
			<button type="button" class="btn btn-primary">
				按钮文本<span class="badge rounded-pill bg-secondary">次要</span>
			</button>
			<button type="button" class="btn btn-primary">
				按钮文本<span class="badge rounded-pill bg-success">成功</span>
			</button>
			<button type="button" class="btn btn-primary">
				按钮文本<span class="badge rounded-pill bg-danger">危险</span>
			</button>
			<button type="button" class="btn btn-primary">
				按钮文本<span class="badge rounded-pill bg-warning">警告</span>
			</button>
			<button type="button" class="btn btn-primary">
				按钮文本<span class="badge rounded-pill bg-info">信息</span>
			</button>
			<button type="button" class="btn btn-primary">
				按钮文本<span class="badge rounded-pill bg-light">浅色</span>
			</button>
			<button type="button" class="btn btn-primary">
				按钮文本<span class="badge rounded-pill bg-dark">深色</span>
			</button>
		</div>
	</body>
</html>

运行结果：

进度条

基础进度条

进度条可以显示用户任务的完成过程。

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

  1. 添加一个带有 .progress 类的 <div>。
  2. 接着，在上面的 <div> 内，添加一个带有 class="progress-bar" 的空的 <div>。
  3. 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:50%" 表示进度条在 50% 的位置。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h2>基础进度条</h2>
			<div class="progress">
				<div class="progress-bar" style="width:50%;">
					50%
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：

进度条高度

进度条的高度通常默认为1rem（或16px），可以通过CSS的height属性来更改。如果想要改变进度条的高度，需要针对进度条（.progress-bar）和进度条的容器（.progress）应用相同的高度值。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h2>进度条高度</h2>
			<div class="progress" style="height:10px;">
			    <div class="progress-bar" style="width:40%;height:10px;">长:40%,高:10px</div>
			  </div>
			  <br>
			  <div class="progress" style="height:20px;">
			    <div class="progress-bar" style="width:50%;height:20px;">长:50%,高:20px</div>
			  </div>
			  <br>
			  <div class="progress" style="height:30px;">
			    <div class="progress-bar" style="width:60%;height:30px;">长:60%,高:30px</div>
			  </div>
		</div>
	</body>
</html>

运行结果：

彩色进度条

默认情况下，进度条为蓝色（主要）。使用任何上下文背景类来更改其颜色。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h2>彩色进度条</h2>
			<div class="progress">
				<div class="progress-bar" style="width:10%">10%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-success" style="width:20%">20%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-info" style="width:30%">30%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-warning" style="width:40%">40%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-danger" style="width:50%">50%</div>
			</div><br>
			<div class="progress border">
				<div class="progress-bar bg-white" style="width:60%">60%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-secondary" style="width:70%">70%</div>
			</div><br>
			<div class="progress border">
				<div class="progress-bar bg-light" style="width:80%">80%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-dark" style="width:90%">90%</div>
			</div>
		</div>
	</body>
</html>

运行结果：

条纹进度条

在 Bootstrap 中，使用 .progress-bar-striped 类可以给进度条添加条纹效果。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h2>条纹进度条</h2>
			<div class="progress">
				<div class="progress-bar progress-bar-striped" style="width:10%">10%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-success progress-bar-striped" style="width:20%">20%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-info progress-bar-striped" style="width:30%">30%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-warning progress-bar-striped" style="width:40%">40%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-danger progress-bar-striped" style="width:50%">50%</div>
			</div><br>
			<div class="progress border">
				<div class="progress-bar bg-white progress-bar-striped" style="width:60%">60%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-secondary progress-bar-striped" style="width:70%">70%</div>
			</div><br>
			<div class="progress border">
				<div class="progress-bar bg-light progress-bar-striped" style="width:80%">80%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-dark progress-bar-striped" style="width:90%">90%</div>
			</div>
		</div>
	</body>
</html>

运行结果：

动画进度条

在 Bootstrap 中，添加 .progress-bar-animated 类来制作进度条动画。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h2>动画进度条</h2>
			<div class="progress">
				<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%">10%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:20%">20%
				</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:30%">30%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:40%">40%
				</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:50%">50%
				</div>
			</div><br>
			<div class="progress border">
				<div class="progress-bar bg-white progress-bar-striped progress-bar-animated" style="width:60%">60%
				</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" style="width:70%">70%
				</div>
			</div><br>
			<div class="progress border">
				<div class="progress-bar bg-light progress-bar-striped progress-bar-animated" style="width:80%">80%
				</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" style="width:90%">90%</div>
			</div>
		</div>
	</body>
</html>

运行结果：

混合色彩进度条

进度条可以设置多种颜色：

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h2>混合色彩进度条</h2>
			<div class="progress">
				<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%">10%</div>
				<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:20%">20%</div>
				<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:30%">30%</div>
				<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:40%">40%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:50%">50%</div>
				<div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" style="width:50%">50%</div>
			</div><br>
			<div class="progress border">
				<div class="progress-bar bg-white progress-bar-striped progress-bar-animated text-success" style="width:50%">50%</div>
				<div class="progress-bar bg-light progress-bar-striped progress-bar-animated text-success" style="width:50%">50%</div>
			</div><br>
			<div class="progress">
				<div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" style="width:100%">100%</div>
			</div>
		</div>
	</body>
</html>

运行结果：

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

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

相关文章

【动手学深度学习】--文本预处理

【动手学深度学习】--文本预处理

文章目录 文本预处理1.读取数据集2.词元化3.词表4.整合所有功能 文本预处理 学习视频&#xff1a;文本预处理【动手学深度学习v2】 官方笔记&#xff1a;文本预处理 对于序列数据处理问题&#xff0c;在【序列模型】中评估了所需的统计工具和预测时面临的挑战&#xff0c;这…
阅读更多...
2023年8月| 红帽RHCE考试战报-微思红帽官方授权培训中心

2023年8月| 红帽RHCE考试战报-微思红帽官方授权培训中心

2023.8.15 新出炉一波红帽考试战报 恭喜微思10位学员顺利PASS红帽认证考试 通过RHCE认证 不仅从专业技术上证明了你的能力 在职场上更是一块进入Linux行业的“敲门砖” 让你在职场竞争中更具竞争力 微思红帽官方授权培训中心--全国直播&#xff0c;就近安排考试&#xff…
阅读更多...
【技巧】安装 win11 必须联网？无法跳过？

【技巧】安装 win11 必须联网？无法跳过？

安装 Win11 时自动检查更新或者让连接网络&#xff0c;没有提供取消按钮&#xff0c;之前有【我没有 Internet 连接】选项。 在这个界面按 ShiftF10 打开命令提示符 输入OOBE\BYPASSNRO 按回车。 回车之后之后系统会重新启动&#xff0c;此时发现下一步的左侧出现了熟悉的【我…
阅读更多...
Matlab论文插图绘制模板第112期—带阴影标记的图

Matlab论文插图绘制模板第112期—带阴影标记的图

之前的文章中&#xff0c;分享了Matlab带线标记的图&#xff1a; 进一步&#xff0c;本期分享的是带阴影标记的图。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中&#xff0c;加群的朋友请自行下载。有需要的朋友可以关注同名公号…
阅读更多...
MCP2515调试心得

MCP2515调试心得

基于 STM32 芯片的 MCP2515 芯片调试心得 1. MCP2515 芯片解析1.1 外部时钟源1.2 可采用连续传输提高效率发送数据时&#xff0c;使用 TX0 为例&#xff1a; 1.3 关于 MASK 和 Filter 的注意事项1.3.1 Filter 的注意事项1.3.2 MASK 设置的一些问题 2. STM32 硬件 SPI 问题 1. M…
阅读更多...
外滩大会发布银行数字化5大趋势：随身银行、AI风控、数字员工、边缘物联与云原生

外滩大会发布银行数字化5大趋势：随身银行、AI风控、数字员工、边缘物联与云原生

通用人工智能风起云涌&#xff0c;金融行业将如何应对&#xff1f; 9月8日&#xff0c;由中国银行业协会指导&#xff0c;网商银行承办的外滩大会银行业数字化论坛上&#xff0c;IDC中国副总裁兼首席分析师武连峰发布了《银行数字科技五大趋势》&#xff1a;随身银行、AI风控、…
阅读更多...
ULN2003 芯片

ULN2003 芯片

芯片介绍&#xff1a; ULN2003 是高耐压、大电流达林顿陈列&#xff0c;由七个硅 NPN 达林顿管组成。 达林顿管并联可以承受更大的电流。 此电路主要应用于继电器驱动器&#xff0c;字锤驱动器&#xff0c;灯驱动器&#xff0c;显示驱动器&#xff08;LED 气 体放电&#…
阅读更多...
Apache Tomcat 漏洞复现

Apache Tomcat 漏洞复现

文章目录 Apache Tomcat 漏洞复现1. Tomcat7 弱密码和后端 Getshell 漏洞1.1 漏洞描述1.2 漏洞复现1.3 漏洞利用1.3.1 jsp小马1.3.2 jsp大马 2. Aapache Tomcat AJP任意文件读取/包含漏洞2.1 漏洞描述2.1 漏洞复现2.2 漏洞利用工具 3. 通过 PUT 方法的 Tomcat 任意写入文件漏洞…
阅读更多...
10元/月？中国电信推出手机直连卫星功能，华为联合开启卫星之旅

10元/月？中国电信推出手机直连卫星功能，华为联合开启卫星之旅

2021年9月8日&#xff0c;华为Mate 60 Pro 系列手机首次推出“卫星语音通话”功能。此功能需与运营商合作&#xff0c;而中国电信率先推出了“手机直连卫星”服务。 中国电信的用户可以在自己的普通手机卡套餐基础上&#xff0c;加装直连卫星服务。此项服务的价格如下&#xff…
阅读更多...
时序数据库 TimescaleDB 基础概念

时序数据库 TimescaleDB 基础概念

时序数据在许多领域中具有广泛的应用&#xff0c;例如金融市场分析、气象预测、交通流量监测、生产过程监控等&#xff0c;时序数据通常是大规模的、高维度的、需要实时计算和分析&#xff0c;针对时序数据的特点与其所带来的挑战&#xff0c;针对时序数据处理所面临的挑战&…
阅读更多...
1000元订金？华为折叠屏手机MateX5今日开始预订，售价尚未公布

1000元订金？华为折叠屏手机MateX5今日开始预订，售价尚未公布

华为最新款折叠屏手机Mate X5今日在华为商城开始预订&#xff0c;吸引了众多消费者的关注。预订时需交纳1000元的订金&#xff0c;而具体售价尚未公布。据华为商城配置表显示&#xff0c;Mate X5预计将搭载Mate 60系列同款麒麟9000S处理器&#xff0c;或可能搭载麒麟9100处理器…
阅读更多...
vue3：4、组合式API-setup选项

vue3：4、组合式API-setup选项

setup每次都要return&#xff0c;好麻烦。怎么解决&#xff1f; 使用 <script setup> 语法糖&#xff08;底层帮你return了&#xff09; 写法如下
阅读更多...
在线实时监测离子风机的功能

在线实时监测离子风机的功能

离子风机是一种能够通过释放大量负离子来净化空气并提供清新环境的设备。要实现联网实时在线监测离子风机&#xff0c;可以考虑以下几个步骤&#xff1a; 1. 设备接入互联网&#xff1a;离子风机需要具备网络连接功能&#xff0c;可以通过无线网络或者以太网接入路由器&#x…
阅读更多...
优思学院｜质量工程师和QA区别在哪？质量工程师有什么发展策略？

优思学院｜质量工程师和QA区别在哪？质量工程师有什么发展策略？

质量管理內容相当复杂&#xff0c;从供应商中选择SQE&#xff0c;入料检验的IQC&#xff0c;制程管控的IPQC&#xff0c;站在客户的立场&#xff0c;保证出货质量OQC&#xff0c;所以一般来说QC/QA人员必须管理从材料到出货的所有质量项目。 而质量工程师&#xff08;QE&#…
阅读更多...
2023国赛数学建模C题模型代码

2023国赛数学建模C题模型代码

C题代码全部都完成了&#xff0c;可以看文末名片 我们先看C题的一个背景 在生鲜商超中,蔬菜类商品保鲜期短,且品相会随销售时间增加而变差。商超需要根据历史销售和需求每天进行补货。由于蔬菜品种众多、产地不同,补货时间在凌晨,商家须在不明确具体单品和价格的情况下进行补…
阅读更多...
读书笔记：多Transformer的双向编码器表示法(Bert)-1

读书笔记：多Transformer的双向编码器表示法(Bert)-1

多Transformer的双向编码器表示法 Bidirectional Encoder Representations from Transformers&#xff0c;即Bert&#xff1b; 本笔记主要是对谷歌Bert架构的入门学习&#xff1a; 介绍Transformer架构&#xff0c;理解编码器和解码器的工作原理&#xff1b;掌握Bert模型架构…
阅读更多...
Tableau自学四部曲_Part4：BI仪表盘搭建

Tableau自学四部曲_Part4：BI仪表盘搭建

文章目录 一、数据可视化原则1. 区分用户2. 主次分明、详略得当3. 真实准确4. 符合大众认知和审美习惯5. 适度原则6. 五秒原则6. 恰到好处的说明7. 少即是多8. 可视化案例 二、BI仪表盘搭建1. 仪表盘搭建原则2. 明确仪表盘主题3. 仪表盘主题拆解4. 开发设计工作表5. 构思仪表盘…
阅读更多...
LQR 控制器

LQR 控制器

LQR&#xff08;Linear Quadratic Regulator&#xff09;控制器 LQR&#xff08;Linear Quadratic Regulator&#xff09;是一种经典的线性控制器设计方法&#xff0c;用于设计线性时不变系统的状态反馈控制器&#xff0c;以最小化系统性能指标&#xff0c;通常是二次代价函数…
阅读更多...
软件测试/测试开发丨ChatGPT：带你进入智能对话的新时代

软件测试/测试开发丨ChatGPT：带你进入智能对话的新时代

简介 人工智能时代来临 我们正处于AI的iPhone时刻。——黄仁勋&#xff08;英伟达CEO&#xff09; ChatGPT 好得有点可怕了&#xff0c;我们距离危险的强人工智能不远了。——马斯克&#xff08;Tesla/SpaceX/Twitter CEO&#xff09; 以上的内容说明我们现在正处于一个技术大…
阅读更多...
Docker镜像解析获取Dockerfile文件

Docker镜像解析获取Dockerfile文件

01、概述 当涉及到容器镜像的安全时&#xff0c;特别是在出现镜像投毒引发的安全事件时&#xff0c;追溯镜像的来源和解析Dockerfile文件是应急事件处理的关键步骤。在这篇博客中&#xff0c;我们将探讨如何从镜像解析获取Dockerfile文件&#xff0c;这对容器安全至关重要。 02…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023