学习Bootstrap 5的第九天

已于 2023-09-09 15:28:41 修改
阅读量301 收藏 3
点赞数 3
分类专栏： Bootstrap 文章标签： 学习 bootstrap 前端
于 2023-09-09 15:26:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74293254/article/details/132773464
版权

目录

列表组

基础的列表组

实例

活动的列表项

实例

禁用的列表项

实例

链接列表项

实例

移除列表边框

实例

带编号的列表组

实例

水平列表组

实例

多种颜色列表项

实例

多种颜色的链接列表项

实例

带徽章的列表组

实例

列表组案例

实例一

实例二

列表组

基础的列表组

在 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>

运行结果

正在奋斗的程序猿
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
bootstrap4--常用布局组件一
zxn200125的博客
12-16 1076
bootstrap4中常用布局组件之列表组、按钮、分页的介绍与演示
Bootstrap5学习笔记
weixin_48778425的博客
10-20 1065
一、布局 1.1 网格 先div.container，再div.row + div.col，例如col-6，col-md-2代表当宽度大于md≥768px才生效 1.2 列 掌握垂直对齐 + 水平对齐 + offset列偏移 + 独立列的示例（演示图片+环绕文字） 1.3 列填充 写在row上，gx-5 水平方向，gy-5 垂直方向间隙，g-5 水平垂直同时都有列间隙，g-0 是无间隙 二、页面内容 2.1 排版 标题 + 显示标题（比h1-h6还大）+ 内联文本元素（下划线，删除线，斜体等）+ 列
Bootstrap组件——超大屏、列表
xun__xing的博客
07-31 1221
超大屏、列表一、超大屏1.基础2.全屏二、列表1.基本2.链接和按钮3.Flush紧致贴齐4.背景色5.配合徽章6.自定义内容7.选项卡8.方法与事件 一、超大屏 通过引用.jumbotron方法，实现构建超大的Hreo界面，醒目的在网站上展示关键的营销信息，轻量、灵活。 1.基础 <div class="container"> <div class="row"> <div class="col"> <div class="jumbotron">
Bootstrap4(十五)
shi199434的博客
12-18 272
Bootstrap4 列表组 大部分基础列表组都是无序的。 要创建列表组，可以在  元素上添加 .list-group 类, 在  元素上添加 .list-group-item 类: 实例 ul class="list-group"> li class="list-group-item">First itemli> li class="li
bootstrap动态生成层级ul-li 新闻预览 常用方法
weixin_30919235的博客
04-19 1094
1 <div class="row" id="add-withinfosortId-row" style="display: none"> 2 <div class="col-md-12" id="add-withinfosortId-divId"></div> 3 </div> 4 <div class="s...
BootStrap笔记-列表组的使用
IT1995的博客
01-24 563
运行截图如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> &lt.
Bootstrap5
04-01
Bootstrap5是中国最流行的前端开发框架之一，由Moshiur Rahman和Bootstrap团队精心打造，它极大地简化了网页设计和开发过程。...通过学习和掌握Bootstrap5，开发者可以高效地创建出响应式、高性能的现代网站。
Bootstrap5响应式在线教育课程学习平台网站模板
07-12
在"Bootstrap5响应式在线教育课程学习平台网站模板"中，我们可以深入探讨以下几个关键知识点： 1. **Bootstrap5框架**：Bootstrap是Twitter推出的一个开源的用于前端开发的工具集，现在已经发展到第五个版本。...
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
Bootstrap3.0学习笔记之入门篇
09-22
Bootstrap是一个流行的前端框架，由Twitter开发，目的是为了简化网页设计和开发过程。...Bootstrap3.0是该框架的一个重要版本，提供了...通过这些知识点的学习，可以为后续深入学习Bootstrap的高级特性打下坚实的基础。
Bootstrap系列之列表组（List Group）
老__L的博客
06-15 3367
列表组是用于显示一系列内容的灵活而强大的组件。修改和扩展它们以支持其中的任何内容。最基本的列表组是一个无序列表，包含列表项和适当的类。在此基础上使用以下选项进行构建，或者根据需要使用您自己的CSS。 将添加到项以指示当前的活动选择。 将添加到项中，使其显示为禁用。注意，有些带有的元素也需要自定义JavaScript来完全禁用它们的点击事件(例如，链接)。 通过添加，使用或来创建具有悬停、禁用和活动状态的可操作列表组项。我们分离了这些伪类，以确保由非交互元素(如或)组成的列表组不提供单击或点击可视性。请确保不
Html5基础之样式
追本溯源的专栏
12-05 3143
记录了通过修改bootstrap一些模板并阅读bootstrap源码时的一些感悟，下面的内容是动手实验+查找资料+推敲猜想得出，以备日后查询和修改补充
Bootstrap 4 Tabs选项卡
热门推荐
10-19 1万+
&lt;ul class="nav nav-tabs" id="myTab" role="tablist"&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link active" id="home-tab" data-toggle="tab" href=&
bootstrap4 新特性
齐枫的博客
02-04 3634
转载自http://geek.csdn.net/news/detail/38027 从Less迁移到Sass： 现在，Bootstrap已加入Sass的大家庭中。得益于Libsass，Bootstrap的编译速度比以前更快； 改进网格系统：新增一个网格层适配移动设备，并整顿语义混合。 支持选择弹性盒模型（flexbox）：这是项划时代的功能——只要修改一个Boolean变量，就可以利用flex
列表组(list-group)
weixin_34384915的博客
02-26 399
<div class='container'> <div class="row"> <div class="col-lg-6 col-md-6 wow fadeInLeft">//fadeInLeft这个列表组从左边淡入 <div class="list-group"> <a href="#" class="li...
bootstrap4列表组用法
weixin_48791208的博客
09-18 566
使用bootstrap4列表组的一些理解: 最基本的列表组就是一个无序列表、带有几个列表项以及适当的样式定义类。在此基础上可以使用下列选项，或根据你自己的需要调整CSS。 添加 .active 到 .list-group-item 下的其中一行或多行，以指示当前有效的选择状态。 Basic example 列表组 .list-group .list-group-item Cras justo odio Dapibus ac facilisis in Morbi leo risu
Bootstrap(五) 进度条、列表组(list-group)
wangchaohpu的博客
08-29 1113
1、进度条 2、动态进度条 3、列表组(list-group)
Bootstrap4 列表组
weixin_45116096的博客
07-10 235
大部分基础列表组都是无序的。 实例： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https
Blazor中的模板化组件
六十五号腕
07-29 1252
实际项目当中经常会有很多重复使用的组件，她们具有相同的布局，只是填充的内容不一样，如果不停的复制粘贴也是件费劲的事情，而且也不好维护和更新，这时候就可以考虑使用模板化组件。 比如以下Bootstrap自带的Card组件： 红色框的部分就是公共的部分，我们可以把她们封装到模板化组件里。 1. RenderFragment 模板化组件需要用到RenderFragment类型的参数。对于上面的例子，我们可以分成Header和Body两个部分，如下： <!--Card组件--> <div cla
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

正在奋斗的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值