学习Bootstrap 5的第九天

news2024/10/11 6:31:15

目录

列表组

基础的列表组

实例

活动的列表项

实例

禁用的列表项

实例

链接列表项

实例

移除列表边框

实例

带编号的列表组

实例

水平列表组

实例

多种颜色列表项

实例

多种颜色的链接列表项

实例

带徽章的列表组

实例

列表组案例

实例一

实例二

列表组

基础的列表组

在 Bootstrap 5 中，可以使用类为 .list-group 的 <ul>或<ol> 元素和类为 .list-group-item 的 <li> 元素。这通常用于显示一组有序或无序的项目。

实例

<!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>
			<ul class="list-group">
				<li class="list-group-item">项目 1</li>
				<li class="list-group-item">项目 2</li>
				<li class="list-group-item">项目 3</li>
			</ul><br />
			<ol class="list-group">
				<li class="list-group-item">项目 1</li>
				<li class="list-group-item">项目 2</li>
				<li class="list-group-item">项目 3</li>
			</ol>
		</div>
	</body>
</html>

运行结果

活动的列表项

在Bootstrap中，可以通过添加一个.active类到<li>元素来设置一个激活状态的列表项。这通常用于高亮显示当前选定的列表项。

注意：这个类可以应用于任何元素，不仅仅是<li>元素。你可以根据需要灵活地应用这个类来设置激活状态。

实例

<!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>
			<ul class="list-group">
				<li class="list-group-item active">项目 1</li>
				<li class="list-group-item">项目 2</li>
				<li class="list-group-item">项目 3</li>
			</ul><br />
			<ol class="list-group">
				<li class="list-group-item active">项目 1</li>
				<li class="list-group-item">项目 2</li>
				<li class="list-group-item">项目 3</li>
			</ol>
		</div>
	</body>
</html>

运行结果

禁用的列表项

在Bootstrap中，可以使用.disabled类来设置一个禁用的列表项。这通常用于表示该列表项不可点击或不可用。

实例

<!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>
			<ul class="list-group">
				<li class="list-group-item disabled">项目 1</li>
				<li class="list-group-item">项目 2</li>
				<li class="list-group-item">项目 3</li>
			</ul><br />
			<ol class="list-group">
				<li class="list-group-item disabled">项目 1</li>
				<li class="list-group-item">项目 2</li>
				<li class="list-group-item">项目 3</li>
			</ol>
		</div>
	</body>
</html>

运行结果

链接列表项

在Bootstrap中，可以将 <ul> 替换为 <div> ， <a> 替换 <li>，使用.list-group-item-action类来创建一个链接的列表项，并在鼠标悬停时显示灰色背景。

实例

<!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>
			<div class="list-group">
				<a href="#" class="list-group-item list-group-item-action">项目 1</a>
				<a href="#" class="list-group-item list-group-item-action">项目 2</a>
				<a href="#" class="list-group-item list-group-item-action">项目 3</a>
			</div>
		</div>
	</body>
</html>

在这个示例中，<div>元素用于包装链接列表项，<a>元素用于创建链接，并添加了.list-group-item和.list-group-item-action类。当鼠标悬停在链接上时，.list-group-item-action类将添加灰色背景色。

运行结果

移除列表边框

在Bootstrap 5中，.list-group-flush类可以用于移除列表的边框和圆角。这个类可以应用于.list-group元素，以创建一个没有边框和圆角的列表组。

实例

<!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>
			<div class="list-group list-group-flush">
				<a href="#" class="list-group-item list-group-item-action">项目 1</a>
				<a href="#" class="list-group-item list-group-item-action">项目 2</a>
				<a href="#" class="list-group-item list-group-item-action">项目 3</a>
			</div>
		</div>
	</body>
</html>

运行结果

带编号的列表组

在Bootstrap 5中，可以使用 .list-group-numbered 类创建前面带有数字的列表项。

实例

<!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>
			<ol class="list-group list-group-numbered">
				<li class="list-group-item">第一项</li>
				<li class="list-group-item">第二项</li>
				<li class="list-group-item">第三项</li>
				<li class="list-group-item">第四项</li>
			</ol>
		</div>
		</div>
	</body>
</html>

运行结果

水平列表组

在Bootstrap 5中，可以将.list-group-horizontal类添加到 .list-group类中，来创建一个水平列表组，其中列表项水平显示而不是垂直显示。

实例

<!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>
			<ol class="list-group list-group-horizontal">
				<li class="list-group-item">第一项</li>
				<li class="list-group-item">第二项</li>
				<li class="list-group-item">第三项</li>
				<li class="list-group-item">第四项</li>
			</ol>
		</div>
		</div>
	</body>
</html>

在这个示例中，.list-group-horizontal类被添加到.list-group元素上，以使列表项水平显示。 

运行结果

多种颜色列表项

在Bootstrap中，可以使用不同的类来设置列表项的颜色。以下是一些可用的类：

  1. .list-group-item-success：设置成功（绿色）背景色。
  2. .list-group-item-secondary：设置次要（灰色）背景色。
  3. .list-group-item-info：设置信息（蓝色）背景色。
  4. .list-group-item-warning：设置警告（黄色）背景色。
  5. .list-group-item-danger：设置危险（红色）背景色。
  6. .list-group-item-dark：设置深色（黑色）背景色。
  7. .list-group-item-light：设置浅色（白色）背景色。

这些类可以应用于.list-group-item元素，以改变其背景颜色。可以在一个列表项上使用多个颜色类，但请注意，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">
			<h1>多种颜色列表项</h1>
			<ul class="list-group">
				<li class="list-group-item">初始项目</li>
				<li class="list-group-item list-group-item-success">成功项目</li>
				<li class="list-group-item list-group-item-secondary">次要项目</li>
				<li class="list-group-item list-group-item-info">信息项目</li>
				<li class="list-group-item list-group-item-warning">警告项目</li>
				<li class="list-group-item list-group-item-danger">危险项目</li>
				<li class="list-group-item list-group-item-dark">深色项目</li>
				<li class="list-group-item list-group-item-light">浅色项目</li>
			</ul>
		</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">
			<h1>多种颜色列表项</h1>
			<div class="list-group">
				<a href="#" class="list-group-item list-group-item-action">激活列表项</a>
				<a href="#" class="list-group-item list-group-item-success">成功列表项</a>
				<a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
				<a href="#" class="list-group-item list-group-item-info">信息列表项</a>
				<a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
				<a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
				<a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
				<a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
				<a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
			</div>
		</div>
	</body>
</html>

运行结果

带徽章的列表组

在Bootstrap 5中，可以使用.badge类来创建一个徽章，并将其与列表项结合使用。徽章通常用于显示一些额外的信息或标记，例如提示、警告或状态。

实例

<!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>
			<ul class="list-group">
				<li class="list-group-item d-flex justify-content-between align-items-center">
					项目 1
					<span class="badge bg-primary rounded-pill">主要</span>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-center">
					项目 2
					<span class="badge bg-secondary rounded-pill">次要</span>
				</li>
			</ul>
		</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">
			<ul class="list-group">
				<li class="list-group-item d-flex justify-content-between align-items-start border-0">
					<div>
						<h3>项目 1</h3>
						<p>这是项目 1 的描述。</p>
					</div>
					<div>
						<button class="btn btn-primary">编辑</button>
						<button class="btn btn-secondary">删除</button>
					</div>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-start border-0">
					<div>
						<h3>项目 2</h3>
						<p>这是项目 2 的描述。</p>
					</div>
					<div>
						<button class="btn btn-primary">编辑</button>
						<button class="btn btn-secondary">删除</button>
					</div>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-start border-0">
					<div>
						<h3>项目 3</h3>
						<p>这是项目 3 的描述。</p>
					</div>
					<div>
						<button class="btn btn-primary">编辑</button>
						<button class="btn btn-secondary">删除</button>
					</div>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-start border-0">
					<div>
						<h3>项目 4</h3>
						<p>这是项目 4 的描述。</p>
					</div>
					<div>
						<button class="btn btn-primary">编辑</button>
						<button class="btn btn-secondary">删除</button>
					</div>
				</li>
				<li class="list-group bg-dark text-white p-0">最后的项目（背景色）</li>
			</ul>
		</div>

		<script>
			window.onload = function() {
				var editButtons = document.querySelectorAll(".btn-primary");
				var deleteButtons = document.querySelectorAll(".btn-secondary");
				var pElements = document.querySelectorAll("p");

				// 为编辑按钮添加点击事件监听器
				editButtons.forEach(function(button, index) {
					button.addEventListener("click", function() {
						// 弹出编辑框，用于修改项目信息
						var newDescription = prompt("请输入新的项目描述：");
						if (newDescription) {
							pElements[index].innerText = newDescription;
						}
					});
				});

				// 为删除按钮添加点击事件监听器
				deleteButtons.forEach(function(button, index) {
					button.addEventListener("click", function() {
						// 删除该项目的相关内容
						var confirmDelete = confirm("确定要删除此项目吗？");
						if (confirmDelete) {
							var listItem = this.parentNode.parentNode;
							listItem.remove();
						}
					});
				});
			};
		</script>
	</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>Bootstrap5列表组综合案例</h2>
			<ul class="list-group">
				<li class="list-group-item">
					<h3>列表项1</h3>
					<p>这是列表项1的描述。</p>
					<button class="btn btn-primary btn-sm add-nested-item">添加嵌套列表项</button>
					<button class="btn btn-primary btn-sm edit-nested-item">更改嵌套列表项</button>
					<button class="btn btn-secondary btn-sm delete-nested-item">删除</button>
					<ul class="list-group">
						<li class="list-group-item">嵌套列表项1</li>
						<li class="list-group-item">嵌套列表项2</li>
						<li class="list-group-item">嵌套列表项3</li>
					</ul>
				</li>
				<li class="list-group-item">
					<h3>列表项2</h3>
					<p>这是列表项2的描述。</p>
					<button class="btn btn-primary btn-sm add-nested-item">添加嵌套列表项</button>
					<button class="btn btn-primary btn-sm edit-nested-item">更改嵌套列表项</button>
					<button class="btn btn-secondary btn-sm delete-nested-item">删除</button>
					<ul class="list-group">
						<li class="list-group-item">嵌套列表项4</li>
						<li class="list-group-item">嵌套列表项5</li>
						<li class="list-group-item">嵌套列表项6</li>
					</ul>
				</li>
				<li class="list-group-item">
					<h3>列表项3</h3>
					<p>这是列表项3的描述。</p>
					<button class="btn btn-primary btn-sm add-nested-item">添加嵌套列表项</button>
					<button class="btn btn-primary btn-sm edit-nested-item">更改嵌套列表项</button>
					<button class="btn btn-secondary btn-sm delete-nested-item">删除</button>
					<ul class="list-group">
						<li class="list-group-item">嵌套列表项7</li>
						<li class="list-group-item">嵌套列表项8</li>
						<li class="list-group-item">嵌套列表项9</li>
					</ul>
				</li>
			</ul>
		</div>

		<script>
			window.onload = function() {
				var addButtons = document.querySelectorAll(".add-nested-item");
				var deleteButtons = document.querySelectorAll(".delete-nested-item");
				var editButtons = document.querySelectorAll(".edit-nested-item");

				// 为添加按钮添加点击事件监听器
				addButtons.forEach(function(button) {
					button.addEventListener("click", function() {
						// 创建新的嵌套列表项
						var newNestedItem = document.createElement("li");
						newNestedItem.className = "list-group-item";
						newNestedItem.innerText = "新的嵌套列表项";

						// 将新的嵌套列表项添加到父级列表项的子列表中
						var parentList = button.parentNode.querySelector("ul.list-group");
						parentList.appendChild(newNestedItem);
					});
				});

				// 为编辑按钮添加点击事件监听器
				editButtons.forEach(function(button) {
					button.addEventListener("click", function() {
						// 获取父级列表项的子列表
						var parentList = button.parentNode.querySelector("ul.list-group");

						// 获取该父级列表项的所有嵌套列表项
						var nestedItems = parentList.querySelectorAll("li.list-group-item");

						// 遍历每个嵌套列表项
						nestedItems.forEach(function(nestedItem) {
							// 修改嵌套列表项的内容
							nestedItem.innerText = "更改后的嵌套列表项";
						});
					});
				});

				// 为删除按钮添加点击事件监听器
				deleteButtons.forEach(function(button) {
					button.addEventListener("click", function() {
						// 删除对应的嵌套列表项
						var nestedItem = button.parentNode;
						nestedItem.remove();
					});
				});
			};
		</script>
	</body>
</html>

运行结果

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

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

相关文章

港科夜闻｜香港科技大学、香港教育大学与华东师范大学联盟,共同推动人工智能与教育未来发展...

港科夜闻｜香港科技大学、香港教育大学与华东师范大学联盟,共同推动人工智能与教育未来发展...

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科技大学、香港教育大学与华东师范大学联盟&#xff0c;共同推动人工智能与教育未来发展。三校共同签署合作备忘录&#xff0c;宣布成立「人工智能及教育未来联盟」。三校将各展所长&#xff0c;针对国家、大湾区及香…
阅读更多...
以可视化方式解释 Go 并发 - 通道

以可视化方式解释 Go 并发 - 通道

在并发编程中&#xff0c;许多编程语言采用共享内存/状态模型。然而&#xff0c;Go 通过实现 通信顺序进程 (CSP) 区别于众多语言。在 CSP 中&#xff0c;一个程序由并行的进程组成&#xff0c;这些进程不共享状态&#xff0c;而是使用通道进行通信和同步它们的操作。因此&…
阅读更多...
集创北方ICN6202 MIPIDSI转LVDS转换芯片

集创北方ICN6202 MIPIDSI转LVDS转换芯片

集创北方ICN6202 1.描述&#xff1a; ICN6201是一个接收MIPIDSI输入和发送LVDS输出的桥接芯片。MIPIDSI最多支持4个车道&#xff0c;每个车道的最大运行频率为1Gbps&#xff1b;总最大输入带宽为4Gbps&#xff1b;并且还支持MIPI定义的ULPS&#xff08;超低功耗状态&#xff…
阅读更多...
半导体与微电子洁净室检测重点-粒子计数器选择 北京中邦兴业

半导体与微电子洁净室检测重点-粒子计数器选择 北京中邦兴业

由于其产品的敏感性&#xff0c;用于微电子和半导体应用的洁净室设施需要严格的环境控制。这些洁净室还装有极其精密和昂贵的设备&#xff0c;例如光刻&#xff0c;蚀刻&#xff0c;清洁&#xff0c;掺杂和切割机。因此&#xff0c;清洁规范中的任何缺陷都可能影响整个生产过程…
阅读更多...
【STC8A8K64D4开发板】第2-8讲：片内存储器

【STC8A8K64D4开发板】第2-8讲：片内存储器

第2-8讲&#xff1a;片内EEPROM读写 学习目的了解STC8A8K64D4片内EEPROM的分布和特点。掌握STC8A8K64D4片内EEPROM分配以及读、写和擦除。 片内EEPROM概述 开发产品的时候&#xff0c;我们经常会遇到需要保存数据的应用场景&#xff0c;如一些重要的记录信息或软/硬件配置信息…
阅读更多...
【云原生】Kubeadmin部署Kubernetes集群

【云原生】Kubeadmin部署Kubernetes集群

目录 ​编辑 一、环境准备 1.2调整内核参数 二、所有节点部署docker 三、所有节点安装kubeadm&#xff0c;kubelet和kubectl 3.1定义kubernetes源 3.2开机自启kubelet 四、部署K8S集群 4.1查看初始化需要的镜像 4.2在 master 节点上传 v1.20.11.zip 压缩包至 /opt 目录…
阅读更多...
Linux系统中驱动之设备树添加按键驱动方法

Linux系统中驱动之设备树添加按键驱动方法

​大家好&#xff0c;每日一个简单的驱动&#xff0c;日久方长&#xff0c;对Linux驱动就越来越熟悉&#xff0c;也越来容易学会写驱动程序。今日进行简单的按键驱动。 一、Linux 下按键驱动原理 按键驱动和 LED 驱动原理上来讲基本都是一样的&#xff0c;都是操作 GPIO&…
阅读更多...
Nmap漏洞检测实战

Nmap漏洞检测实战

任务要求 环境要求 1、PC终端一个&#xff08;博主是Win11电脑&#xff0c;读者要注意&#xff09; 1、nmap安装包&#xff08;7.9.2版本&#xff09;下载地址 提取码&#xff1a;hqlk 2、VM虚拟机&#xff08;一台为 Kali Linux&#xff0c;一台为Windows XP SP2&#xff09…
阅读更多...
Selenium 隐藏浏览器指纹特征的几种方式

Selenium 隐藏浏览器指纹特征的几种方式

我们使用 Selenium 对网页进行爬虫时&#xff0c;如果不做任何处理直接进行爬取&#xff0c;会导致很多特征是暴露的 对一些做了反爬的网站&#xff0c;做了特征检测&#xff0c;用来阻止一些恶意爬虫 本篇文章将介绍几种常用的隐藏浏览器指纹特征的方式 1. 直接爬取 目标对…
阅读更多...
计算机竞赛 基于深度学习的行人重识别(person reid)

计算机竞赛 基于深度学习的行人重识别(person reid)

文章目录 0 前言1 技术背景2 技术介绍3 重识别技术实现3.1 数据集3.2 Person REID3.2.1 算法原理3.2.2 算法流程图 4 实现效果5 部分代码6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的行人重识别 该项目较为新颖&#xff0c;适合…
阅读更多...
【动手学深度学习】--长短期记忆网络LSTM

【动手学深度学习】--长短期记忆网络LSTM

文章目录 长短期记忆网络LSTM1.门控记忆元1.1输入门、忘记门、输出门1.2候选记忆元1.3记忆元1.4隐状态 2.从零实现2.1加载数据集2.2初始化模型参数2.3定义模型2.4 训练与预测 3.简洁实现 长短期记忆网络LSTM 学习视频&#xff1a;长短期记忆网络&#xff08;LSTM&#xff09;【…
阅读更多...
DP-modeler建模

DP-modeler建模

1、打开软件&#xff0c;新建工程&#xff0c;导入模型&#xff0c;如下&#xff1a; 2、建立一个立体模型&#xff0c;结果如下图&#xff1a;
阅读更多...
jmeter安装了插件，但是添加时无插件选项

jmeter安装了插件，但是添加时无插件选项

想用阶梯加压&#xff0c;然后需要安装插件&#xff0c;按照网上教程&#xff0c;下载插件管理器&#xff0c;使用插件管理器安装好jpgc后&#xff08;如图一&#xff0c;已勾选&#xff0c;说明已安装&#xff09;&#xff0c; 然后重启打开jmeter&#xff0c;添加线程组下一级…
阅读更多...
python知识：有效使用property装饰器

python知识：有效使用property装饰器

一、说明 Python是唯一有习语&#xff08;idioms&#xff09;的语言。这增强了它的可读性&#xff0c;也许还有它的美感。装饰师遵循Python的禅宗&#xff0c;又名“Pythonic”方式。装饰器从 Python 2.2 开始可用。PEP318增强了它们。下面是一个以初学者为中心的教程&#xff…
阅读更多...
Jdk1.7之ConcurrentHashMap源码总结

Jdk1.7之ConcurrentHashMap源码总结

文章目录 一、常见属性1. 初始化容量2. 加载因子3. 并发级别 二、重要方法1. 构造方法2. ConcurrentHashMap#put方法2.1 ConcurrentHashMap#put#ensureSegment2.2 ConcurrentHashMap#Segment#put2.2.1 Segment#put#scanAndLockForPut2.2.2 Segment#put#rehash 3. ConcurrentHas…
阅读更多...
linux内核如何根据文件名索引到文件内容

linux内核如何根据文件名索引到文件内容

https://zhuanlan.zhihu.com/p/78724124 根据文件名索引到文件内容 表面上&#xff0c;用户通过文件名&#xff0c;打开文件。实际上&#xff0c;系统内部这个过程分成三步&#xff1a;首先&#xff0c;系统找到这个文件名对应的inode号码&#xff1b;其次&#xff0c;通过in…
阅读更多...
迅为RK3568开发板驱动指南第六篇-平台总线

迅为RK3568开发板驱动指南第六篇-平台总线

文档教程更新至第六篇 第1篇 驱动基础篇 第2篇 字符设备基础 第3篇 并发与竞争 第4篇 高级字符设备进阶 第5篇 中断 第6篇 平台总线 未完待续&#xff0c;持续更新中... 视频教程更新至十一期 第一期_驱动基础 第二期_字符设备基础 第三期_并发与竞争 第四期_高级字…
阅读更多...
解释模块化开发及其优势，并介绍常用的模块化规范。

解释模块化开发及其优势，并介绍常用的模块化规范。

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 模块化开发⭐ 模块化开发的优势⭐ 常用的模块化规范⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是…
阅读更多...
公众号hanniman往期精选

公众号hanniman往期精选

目录 一、AI产品分析&#xff08;10篇&#xff09; 二、AI产品经理&#xff08;10篇&#xff09; 三、AI技术&#xff08;10篇&#xff09; 四、AI行业及个人成长&#xff08;10篇&#xff09; 一、AI产品分析 1、【重点】深度 | 关于AIGC商业化的13个非共识认知&#xff08;80…
阅读更多...
华为OD机试 - 滑动窗口最大和

华为OD机试 - 滑动窗口最大和

滑动窗口的经典题型&#xff0c;重复题目 #include <stdio.h> #include <string.h> #include <stdlib.h>#define MAX(a,b) ((a) > (b) ? (a) : (b)) int main() {int n;scanf("%d", &n);int *list malloc(sizeof(int) * n);for (int i …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023