学习Bootstrap 5的第十二天

news2024/9/22 9:27:35

目录

轮播

轮播所使用的类说明

创建轮播

实例

轮播图片上添加描述

实例

模态框

如何创建模态框

实例

模态框尺寸

全屏模态

实例一

实例二

模态框居中显示

实例

模态框滚动条

实例

轮播

轮播所使用的类说明

类描述
.carousel创建轮播。
.carousel-indicators为轮播添加指示器。它们是每张幻灯片底部的小点。
表示轮播中有多少张幻灯片，以及用户当前正在查看哪张幻灯片。
.carousel-inner将幻灯片添加到轮播。
.carousel-item规定每张幻灯片的内容。
.carousel-control-prev向轮播添加一个向左（上一个）按钮，允许用户在幻灯片之间回退。
.carousel-control-next向轮播添加一个向右（下一个）按钮，允许用户在幻灯片之间前进。
.carousel-control-prev-icon与 .carousel-control-prev 一起使用，创建“上一个”按钮。
.carousel-control-next-icon与 .carousel-control-next 一起使用，创建“下一个”按钮。
.slide从一个项目滑到下一个项目时添加 CSS 过渡和动画效果。
如果您不想要这种效果，请删除此类。

创建轮播

实例

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap5 实例</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 id="carouselExample" class="carousel slide" data-bs-ride="carousel">
			<!-- 轮播指示符 -->
			<ol class="carousel-indicators">
				<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
				<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
				<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
			</ol>

			<!-- 轮播项 -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="img/1.png" class="d-block w-100" alt="Image 1">
				</div>
				<div class="carousel-item">
					<img src="img/7.png" class="d-block w-100" alt="Image 2">
				</div>
				<div class="carousel-item">
					<img src="img/1.png" class="d-block w-100" alt="Image 3">
				</div>
			</div>

			<!-- 左右切换按钮 -->
			<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Previous</span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Next</span>
			</button>
		</div>
	</body>
</html>

运行结果

轮播图片上添加描述

要在轮播图片上添加描述文本，你可以在每个 <div class="carousel-item"> 的内部添加一个 <div class="carousel-caption"> 元素。

实例

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap5 实例</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 id="carouselExample" class="carousel slide" data-bs-ride="carousel">
			<ol class="carousel-indicators">
				<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
				<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
				<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
			</ol>

			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="img/1.png" class="d-block w-100" alt="Image 1">
					<div class="carousel-caption">
						<h5>描述标题</h5>
						<p>这是图片1的描述</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="img/7.png" class="d-block w-100" alt="Image 2">
					<div class="carousel-caption">
						<h5>描述标题</h5>
						<p>这是图片2的描述</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="img/1.png" class="d-block w-100" alt="Image 3">
					<div class="carousel-caption">
						<h5>描述标题</h5>
						<p>这是图片3的描述</p>
					</div>
				</div>
			</div>

			<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Previous</span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Next</span>
			</button>
		</div>
	</body>
</html>

运行结果

模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

如何创建模态框

要创建一个Bootstrap5模态框，需要使用以下步骤：

  1. 在HTML文档中添加一个触发模态框的按钮。这个按钮可以是任何元素，比如一个普通的按钮或一个链接。
  2. 创建模态框窗口。我们可以使用<div>标签来创建模态框窗口。给<div>元素添加两个重要的类名：modal 和 fade（使用 .fade 类可以设置模态框弹出或关闭的效果）。同时为<div>元素指定唯一的id属性，这个id属性将会被用于后续的JavaScript代码中。注意，模态框的主体内容应该放在一个<div class="modal-body">元素内。

实例

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap5 实例</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-4">
			<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
				打开模态框
			</button>
			<div class="modal fade" id="myModal">
				<div class="modal-dialog">
					<div class="modal-content">
						<!-- 模态框头部 -->
						<div class="modal-header">
							<h4 class="modal-title">模态框标题</h4>
							<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
						</div>
						<!-- 模态框主体 -->
						<div class="modal-body">
							<p>这是模态框的内容</p>
						</div>
						<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary">保存更改</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果

模态框尺寸

要调整模态框的尺寸，可以将 .modal-dialog 类与尺寸类（.modal-sm、.modal-lg、.modal-xl）一同添加到 <div> 元素。

全屏模态

如果你想要一个全屏的模态框，可以添加.modal-fullscreen类到.modal-dialog元素上。这样模态框将会占据整个屏幕。

注意：使用 .modal-fullscreen-*-* 类可以控制在什么尺寸下全屏幕显示:

类描述实例
.modal-fullscreen-sm-down576px 以下尺寸全屏幕显示尝试一下
.modal-fullscreen-md-down768px 以下尺寸全屏幕显示尝试一下
.modal-fullscreen-lg-down992px 以下尺寸全屏幕显示尝试一下
.modal-fullscreen-xl-down1200px 以下尺寸全屏幕显示尝试一下
.modal-fullscreen-xxl-down1400px 以下尺寸全屏幕显示尝试一下

实例一

以下是如何为模态框设置全屏模态的示例代码： 

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap5 实例</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-4">
			<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
				打开模态框
			</button>
			<div class="modal fade" id="myModal">
				<div class="modal-dialog modal-dialog-centered modal-fullscreen">
					<div class="modal-content">
						<!-- 模态框头部 -->
						<div class="modal-header">
							<h4 class="modal-title">模态框标题</h4>
							<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
						</div>
						<!-- 模态框主体 -->
						<div class="modal-body">
							<p>这是模态框的内容</p>
						</div>
						<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary">保存更改</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

在这个示例中，.modal-dialog 元素添加了 .modal-fullscreen 类和 .modal-dialog-centered 类（用于居中显示模态框）。这将使模态框成为一个全屏模态框，并且居中显示在屏幕上。 

实例二

以下是如何为模态框设置不同尺寸的示例代码： 

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap5 实例</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-4">
			<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
				打开模态框
			</button>
			<div class="modal fade" id="myModal">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<!-- 模态框头部 -->
						<div class="modal-header">
							<h4 class="modal-title">模态框标题</h4>
							<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
						</div>
						<!-- 模态框主体 -->
						<div class="modal-body">
							<p>这是模态框的内容</p>
						</div>
						<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary">保存更改</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

在这个示例中，.modal-dialog 类被添加了 .modal-lg 类。这将使模态框变为大型模态框，具有最大宽度为 800px 的样式。可以根据需要选择适当的尺寸类（.modal-sm、.modal-lg、.modal-xl）来调整模态框的大小。

运行结果

模态框居中显示

要让模态框水平和垂直方向都居中显示，可以使用.modal-dialog-centered类。将该类添加到.modal-dialog元素上即可。

实例

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap5 实例</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-4">
			<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
				打开模态框
			</button>
			<div class="modal fade" id="myModal">
				<div class="modal-dialog modal-dialog-centered">
					<div class="modal-content">
						<!-- 模态框头部 -->
						<div class="modal-header">
							<h4 class="modal-title">模态框标题</h4>
							<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
						</div>
						<!-- 模态框主体 -->
						<div class="modal-body">
							<p>这是模态框的内容</p>
						</div>
						<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary">保存更改</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果

模态框滚动条

默认情况下模态框如果包含很多内容，页面会自动生成一个滚动，模态框随着页面的滚动而滚动。

但是，如果我们只想在模态框里头设置一个滚动条，可以使用 .modal-dialog-scrollable 类。

实例

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap5 实例</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-4">
			<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
				打开模态框
			</button>
			<div class="modal fade" id="myModal">
				<div class="modal-dialog modal-dialog-scrollable">
					<div class="modal-content">
						<!-- 模态框头部 -->
						<div class="modal-header">
							<h4 class="modal-title">模态框标题</h4>
							<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
						</div>
						<!-- 模态框主体 -->
						<div class="modal-body">
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
							模态框内容..<br />
						</div>
						<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary">保存更改</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果

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

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

相关文章

卷积神经网络中的 Full、Same 和 Valid 卷积

卷积神经网络中的 Full、Same 和 Valid 卷积

文章目录 卷积神经网络概述Full 卷积Same 卷积Valid 卷积卷积模式的选择代码示例结论 &#x1f389;欢迎来到AIGC人工智能专栏~卷积神经网络中的 Full、Same 和 Valid 卷积 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#x1f388;该系列…
阅读更多...
$set小概率的赋值失败问题都被我碰上了

$set小概率的赋值失败问题都被我碰上了

这用到this.$set()的方法用来更新对象中添加的键值对&#xff0c;发现能更新&#xff0c;但是点击切换不能在浏览器上显示。试好多次都没有找到问题&#xff0c;上百度查找发现问题出在图上的第二部&#xff0c;把第二步注释掉就没有问题了&#xff0c;就可以正常切换&#xff…
阅读更多...
管理方法论：5. 团队发展的阶段模型——调整管理策略

管理方法论：5. 团队发展的阶段模型——调整管理策略

概念 布鲁斯塔克曼(Bruce Tuckman)提出团队发展阶段模型。 团队发展的五个阶段是&#xff1a;组建期&#xff08;Forming&#xff09;、激荡期&#xff08;Storming&#xff09;、规范期&#xff08;Norming&#xff09;、执行期&#xff08;Performing&#xff09;和休整期&…
阅读更多...
二十种实战调优MySQL性能优化的经验

二十种实战调优MySQL性能优化的经验

老铁感觉不错的话就点个赞,文末送 [MySQL性能调优与架构设计.pdf]电子书 今天&#xff0c;数据库的操作越来越成为整个应用的性能瓶颈了&#xff0c;这点对于Web应用尤其明显。关于数据库的性能&#xff0c;这并不只是DBA才需要担心的事&#xff0c;而这更是我们程序员需要去关…
阅读更多...
Jmeter——循环控制器中实现Counter计数器的次数重置

Jmeter——循环控制器中实现Counter计数器的次数重置

近期在使用Jmeter编写个辅助测试的脚本&#xff0c;用到了多个Loop Controller和Counter。 当时想的思路就是三个可变的数量值&#xff0c;使用循环实现&#xff1b;但第三个可变值的数量次数&#xff0c;是基于第二次循环中得到的结果才能确认最终次数&#xff0c;每次的结果…
阅读更多...
港联证券：A股性价比已非常高 有望随基本面回升而回暖

港联证券：A股性价比已非常高 有望随基本面回升而回暖

日前&#xff0c;在第17届中国上市公司价值评选专家评审会暨专家研讨会上&#xff0c;海通证券研究所所长路颖提示出资者重视当下宏观经济以及A股市场的活跃因素。她表明&#xff0c;本轮库存周期或将于2023年三季度见底随后迎来上升&#xff0c;一起当前A股性价比已非常高&…
阅读更多...
什么是作业指导书sop？sop作业指导书是什么意思？

什么是作业指导书sop？sop作业指导书是什么意思？

现在很多生产企业都引进了sop作业指导书的概念&#xff0c;不过很多人却对sop不甚了解&#xff0c;缺乏最基本的认知&#xff0c;本篇就来跟大家讲一讲&#xff0c;到底什么是作业指导书sop&#xff0c;企业如何打造一份好的sop作业指导书&#xff1f; sop的全名是标准作业程序…
阅读更多...
人大金仓以新兴技术加速数据管理智能化

人大金仓以新兴技术加速数据管理智能化

新兴技术:数据库自治事务 引言 在当今数字化时代&#xff0c;数据库技术不断演进&#xff0c;为企业提供了更高效的数据管理和处理手段。数据库自治事务作为一项新兴技术&#xff0c;引起了业界的广泛关注。目前&#xff0c;KingbaseES自治事务技术已经成功地应用于错误日志记录…
阅读更多...
算法-80. 删除有序数组中的重复项 II-⭐⭐

算法-80. 删除有序数组中的重复项 II-⭐⭐

给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。 提示&…
阅读更多...
刚考过PMP想问一下怎样才能转行做PM

刚考过PMP想问一下怎样才能转行做PM

引言&#xff1a; 在当今竞争激烈的职场环境下&#xff0c;许多人考虑转行成为项目经理&#xff08;PM&#xff09;&#xff0c;这是一个充满挑战和机遇的职业。虽然转行可能会面临一些困难&#xff0c;但通过采取适当的策略和技巧&#xff0c;你可以成功地转型为一名优秀的项目…
阅读更多...
短视频业内有一句话：先模仿在超越

短视频业内有一句话：先模仿在超越

最近我在一个公众号发现了视频号爆款排行榜&#xff0c;这里集合了视频号的各种视频&#xff0c;可以帮助用户在视频号中了解目前最受欢迎和流行的内容类型。 除此之外很多人不知道这个视频号爆款排行是做什么的&#xff0c;主要是为了大家了解视频号的爆款数据以及为个人或者…
阅读更多...
数据分析：小红书品牌“共情力”缔造指南

数据分析：小红书品牌“共情力”缔造指南

导语 “从哪来回哪去。”“你要带我回中国吗&#xff1f;” 8月30日&#xff0c;博主“煎饼果仔”、“夏天妹妹”发布自制短剧《逃出大英博物馆》&#xff0c;讲述一盏玉壶逃出大英博物馆寻找回国之路的故事&#xff0c;在发布后短时间内实现“现象级传播”。 见证现象级话题…
阅读更多...
线性表-----栈（栈的初始化、建立、入栈、出栈、遍历、清空等操作）

线性表-----栈（栈的初始化、建立、入栈、出栈、遍历、清空等操作）

目录 前言 栈 1.定义 2.栈的特点 3.栈的储存方式 3.1数组栈 3.2链栈 4.栈的基本操作&#xff08;C语言&#xff09; 4.1初始化 4.2判断是否满栈 4.3判断空栈 4.4 入栈 4.5 出栈 4.6获取栈顶元素 4.7遍历栈 4.8清空栈 完整代码示例 前言 大家好呀&#xff01;今天我…
阅读更多...
聚观早报 | OPPO A2 Pro官宣；京东建材发布“1家1”计划

聚观早报 | OPPO A2 Pro官宣；京东建材发布“1家1”计划

【聚观365】9月15日消息 OPPO A2 Pro官宣 京东建材发布“1家1”计划 谷歌开始新一轮“瘦身”计划 CapCut全球用户总支出超1亿美元 马斯克称特斯拉FSD安全性超过人类司机 OPPO A2 Pro官宣 去年11月&#xff0c;OPPO推出了A1 Pro&#xff0c;该机采用了120Hz OLED护眼曲屏&…
阅读更多...
pyhton内置的数据类型(二)

pyhton内置的数据类型(二)

pyhton内置的数据类型 一、内置数据类型的解释创建及赋值二、表示转义的符号实例操作 二、字符串的基本特性1.连接操作符 “ ” &#xff0c;提示&#xff1a;必须是同一数据类型才能相加2. 重复操作符 “ * ”3.成员操作符 “ in ”4. 正向索引和反向索引5. 切片&#xff08;…
阅读更多...
Scholarcy：AI在线论文摘要总结工具

Scholarcy：AI在线论文摘要总结工具

【产品介绍】 名称 scholarcy 成立/上线时间 2018年 具体描述 scholarcy是一个基于AI的在线论文文献摘要总结工具&#xff0c;可以帮助研究人员和学生快速阅读和理解各种类型的文献&#xff0c;如研究论文、报告和书籍章节。 scholarcy可以在几秒钟…
阅读更多...
【Mybatis源码分析】插件机制和Pagehelper插件源码分析

【Mybatis源码分析】插件机制和Pagehelper插件源码分析

分页插件Pagehelper源码分析 一、插件机制二、Pagehelper源码分析 前文叙述过以下内容&#xff1a;Mybatis对动态代理的使用&#xff0c;一二级缓存和懒加载的原理。其中二级缓存解释了在分布式环境下可能出现缓存不一致问题&#xff0c;但没说解决方案。其实个人认为这种问题除…
阅读更多...
前端JavaScript中异步的终极解决方案：async/await

前端JavaScript中异步的终极解决方案：async/await

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 1. 背景 在深入讨论 async/await 之前&#xff0c;我们需要了解一下 JavaScript 的单线程和非阻塞的特性。JavaScript 是…
阅读更多...
编写postcss插件，全局css文件px转vw

编写postcss插件，全局css文件px转vw

跟目录下创建plugins文件夹&#xff0c;创建postcss-px-to-viewport.ts文件 文件内代码&#xff1a; // postcss 的插件 vite内置了postCss插件 无需安装 import { Plugin } from postcss;interface Options {viewportWidth: number }const Options {viewportWidth: 375, // …
阅读更多...
mmdetection环境配置和安装

mmdetection环境配置和安装

创建 openmmlab 虚拟环境 conda create -n openmmlab python3.7激活openmmlab环境 conda activate openmmlab安装torch 在torch官网查找安装自己电脑cuda对应的torch安装命令 conda install pytorch torchvision torchaudio pytorch-cuda11.7 -c pytorch -c nvidia使用 MIM …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023