学习Bootstrap 5的第十一天

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

目录

折叠

基础的折叠

实例

Accordion（手风琴）

实例

导航

导航菜单

实例

导航对齐方式

实例

垂直导航栏

实例

动态选项卡

实例

胶囊状动态选项卡

实例

等宽的选项卡/胶囊的下拉菜单

实例

导航栏

基础的导航栏

实例

垂直导航栏

实例

居中对齐的导航栏

实例

不同颜色导航栏

实例

品牌/Logo

实例

折叠导航栏

实例

下拉菜单导航栏

实例

导航栏菜单和按钮

实例

导航栏文本

实例

固定导航栏

实例

导航栏案例

实例

折叠

基础的折叠

在 Bootstrap 5 中，折叠效果可以通过添加特定的属性和类来轻松实现内容的显示和隐藏。具体步骤如下：

1、创建一个可折叠的元素，通常使用 <div> 标签，并为其添加 .collapse 类，以指示它是可折叠的。

<div class="collapse" id="demo">
  <!-- 可折叠的内容 -->
  ...
</div>

2、在按钮或链接中添加 data-bs-toggle="collapse" 属性，以触发折叠效果，并使用 data-bs-target="#id" 或 href="#id" 属性将按钮或链接与要折叠的元素关联起来。

<button type="button" data-bs-toggle="collapse" data-bs-target="#demo">
  点击我
</button>

或者，也可以使用 <a> 元素代替 <button>，并使用 href 属性来指定目标元素。

<a href="#demo" data-bs-toggle="collapse">
  点击我
</a>

3、默认情况下，折叠元素的内容是隐藏的。如果想要默认显示内容，可以在折叠元素的 <div> 上添加 .show 类。

<div class="collapse show" id="demo">
  <!-- 默认显示的可折叠内容 -->
  ...
</div>

通过在按钮或链接上添加 data-bs-toggle="collapse" 和 data-bs-target="#demo"（或使用 href），单击按钮或链接时，折叠元素的内容将显示或隐藏。如果您想要默认显示内容，可以在折叠元素的 <div> 上添加 .show 类。

实例

<!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-3">
			<h2>基础的折叠</h2>
			<h3>默认显示内容</h3>
			<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">
				点击我
			</button><br />
			<div class="collapse show" id="demo">
				<div class="card card-body">
					这是折叠的内容
				</div>
			</div>
			<h3>内容是隐藏的</h3>
			<a href="#demo1" data-bs-toggle="collapse">
				点击我
			</a>
			<div class="collapse" id="demo1">
				<div class="card card-body">
					这是折叠的内容
				</div>
			</div>
		</div>

	</body>
</html>

运行结果

Accordion（手风琴）

注意：使用 data-bs-parent 属性确保当显示可折叠项目之一时，会关闭指定父项下的所有可折叠元素。

实例

<!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-3">
			<div id="accordion">
				<div class="card">
					<div class="card-header" id="headingOne">
						<h5 class="mb-0">
							<button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne"
								aria-expanded="true" aria-controls="collapseOne">
								折叠项 1
							</button>
						</h5>
					</div>

					<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
						data-bs-parent="#accordion">
						<div class="card-body">
							这是折叠项 1 的内容
						</div>
					</div>
				</div>

				<div class="card">
					<div class="card-header" id="headingTwo">
						<h5 class="mb-0">
							<button class="btn btn-link collapsed" data-bs-toggle="collapse"
								data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
								折叠项 2
							</button>
						</h5>
					</div>

					<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
						<div class="card-body">
							这是折叠项 2 的内容
						</div>
					</div>
				</div>

				<div class="card">
					<div class="card-header" id="headingThree">
						<h5 class="mb-0">
							<button class="btn btn-link collapsed" data-bs-toggle="collapse"
								data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
								折叠项 3
							</button>
						</h5>
					</div>

					<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
						<div class="card-body">
							这是折叠项 3 的内容
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>

运行结果

导航

导航菜单

如果要创建简单的水平菜单，可以在 <ul> 元素上添加 .nav 类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类来创建一个简单的水平导航栏。

实例

<!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-3">
			<h2>简单的水平导航</h2>
			<ul class="nav">
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">禁用</a>
				</li>
			</ul>
		</div>

	</body>
</html>

运行结果

导航对齐方式

在 Bootstrap 5 中，.justify-content-center 类可以用于将导航项居中显示，.justify-content-end 类可以用于将导航项右对齐。

实例

<!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-3">
			<h2>导航对齐方式</h2>
			<p>左对齐导航 (默认):</p>
			<ul class="nav">
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">禁用</a>
				</li>
			</ul>

			<p class="text-center">居中对齐导航:</p>
			<ul class="nav justify-content-center">
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">禁用</a>
				</li>
			</ul>

			<p class="text-end">右对齐导航:</p>
			<ul class="nav justify-content-end">
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">禁用</a>
				</li>
			</ul>
		</div>

	</body>
</html>

运行结果

垂直导航栏

.flex-column 类可以用于创建垂直导航。通过将该类添加到 <ul> 元素上，可以使导航项在垂直方向上排列。

实例

<!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-3">
			<h2>垂直导航栏</h2>
			<ul class="nav flex-column">
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">禁用</a>
				</li>
			</ul>
		</div>

	</body>
</html>

运行结果

动态选项卡

  1. 使用 .nav-tabs 类可以将导航转化为选项卡，并使用 .active 类来标记当前选中的选项。
  2. 如果要设置选项卡是动态可切换的，可以在每个链接上添加 data-bs-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡的内容的 <div> 标签使用 .tab-content 类 。

注意：如果希望有淡入效果可以在 .tab-pane 后添加 .fade类。

实例

<!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-3">
			<h2>动态选项卡</h2>
			<ul class="nav nav-tabs" id="myTabs" role="tablist">
				<li class="nav-item" role="presentation">
					<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab"
						aria-controls="home" aria-selected="true">首页</a>
				</li>
				<li class="nav-item" role="presentation">
					<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab"
						aria-controls="profile" aria-selected="false">个人资料</a>
				</li>
				<li class="nav-item" role="presentation">
					<a class="nav-link" id="messages-tab" data-bs-toggle="tab" href="#messages" role="tab"
						aria-controls="messages" aria-selected="false">消息</a>
				</li>
			</ul>

			<div class="tab-content" id="myTabContent">
				<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
					<h1>这是首页内容</h1>
					<!-- 这里放置首页的具体内容 -->
				</div>
				<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
					<h1>这是个人资料内容</h1>
					<!-- 这里放置个人资料的具体内容 -->
				</div>
				<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
					<h1>这是消息内容</h1>
					<!-- 这里放置消息的具体内容 -->
				</div>
			</div>
		</div>
	</body>
</html>

运行结果

胶囊状动态选项卡

只需将上面动态选项卡的实例的代码中 data-bs-toggle="tab"属性设置为 data-bs-toggle="pill"。

实例

<!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-3">
			<h2>胶囊状动态选项卡</h2>
			<ul class="nav nav-pills" id="myTabs" role="tablist">
				<li class="nav-item" role="presentation">
					<a class="nav-link active" id="home-tab" data-bs-toggle="pill" href="#home" role="tab"
						aria-controls="home" aria-selected="true">首页</a>
				</li>
				<li class="nav-item" role="presentation">
					<a class="nav-link" id="profile-tab" data-bs-toggle="pill" href="#profile" role="tab"
						aria-controls="profile" aria-selected="false">个人资料</a>
				</li>
				<li class="nav-item" role="presentation">
					<a class="nav-link" id="messages-tab" data-bs-toggle="pill" href="#messages" role="tab"
						aria-controls="messages" aria-selected="false">消息</a>
				</li>
			</ul>

			<div class="tab-content" id="myTabContent">
				<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
					<h1>这是首页内容</h1>
					<!-- 这里放置首页的具体内容 -->
				</div>
				<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
					<h1>这是个人资料内容</h1>
					<!-- 这里放置个人资料的具体内容 -->
				</div>
				<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
					<h1>这是消息内容</h1>
					<!-- 这里放置消息的具体内容 -->
				</div>
			</div>
		</div>
	</body>
</html>

运行结果

等宽的选项卡/胶囊的下拉菜单

要创建等宽的选项卡/胶囊的下拉菜单，可以使用.nav-justified类对齐标签/胶囊。

实例

<!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-3">
			<h1>等宽的选项卡/胶囊的下拉菜单</h1>
			<h2>胶囊导航带下拉菜单</h2>
			<ul class="nav nav-pills nav-justified">
				<li class="nav-item">
					<a class="nav-link active" href="#">首页</a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">个人资料</a>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item" href="#">个人资料 1</a></li>
						<li><a class="dropdown-item" href="#">个人资料 2</a></li>
						<li><a class="dropdown-item" href="#">个人资料 3</a></li>
					</ul>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">消息</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">禁用</a>
				</li>
			</ul><br />
			<h2>选项卡下拉菜单</h2>
			<ul class="nav nav-tabs nav-justified">
				<li class="nav-item">
					<a class="nav-link active" href="#">首页</a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">个人资料</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#">个人资料 1</a>
						<a class="dropdown-item" href="#">个人资料 2</a>
						<a class="dropdown-item" href="#">个人资料 3</a>
					</div>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">消息</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">禁用</a>
				</li>
			</ul>
		</div>

	</body>
</html>

运行结果

导航栏

基础的导航栏

通过使用Bootstrap，可以创建一个可以根据屏幕大小扩展或折叠的导航栏。要创建标准导航栏，请使用.navbar类，然后使用.navbar-expand-xxl|xl|lg|md|sm（在特大、超大、大、中型设备上水平排列，或小屏幕上垂直堆叠导航栏）类来指定在不同设备上的排列方式。要添加链接，请使用带有.navbar-nav类的<ul>元素（或<div>），并添加带有.nav-item类的<li>元素和带有.nav-link类的<a>元素。

实例

<!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-3">
			<h2>基础的导航栏</h2>
			<nav class="navbar navbar-expand-md navbar-light bg-light">
				<div class="container-fluid">
					<a class="navbar-brand" href="#">Logo</a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
						aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarNav">
						<ul class="navbar-nav">
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">Home</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">About</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">Contact</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</body>
</html>

运行结果

垂直导航栏

通过删除 .navbar-expand-xxl|xl|lg|md|sm 类来创建垂直导航栏。

实例

<!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-3">
			<h2>垂直导航栏</h2>
			<nav class="navbar navbar-light bg-light">
				<div class="container-fluid">
					<a class="navbar-brand" href="#">Logo</a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
						aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarNav">
						<ul class="navbar-nav">
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">Home</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">About</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">Contact</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</body>
</html>

运行结果

居中对齐的导航栏

如果想要将导航栏的内容居中，可以使用 Bootstrap 的 .justify-content-center 类。这个类可以将 flexbox 容器中的项目在水平方向上居中。

实例

<!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-3">
			<h2>居中的导航栏</h2>
			<ul class="nav nav-pills justify-content-center" id="myTabs" role="tablist">
				<li class="nav-item" role="presentation">
					<a class="nav-link active" id="home-tab" data-bs-toggle="pill" href="#home" role="tab"
						aria-controls="home" aria-selected="true">首页</a>
				</li>
				<li class="nav-item" role="presentation">
					<a class="nav-link" id="profile-tab" data-bs-toggle="pill" href="#profile" role="tab"
						aria-controls="profile" aria-selected="false">个人资料</a>
				</li>
				<li class="nav-item" role="presentation">
					<a class="nav-link" id="messages-tab" data-bs-toggle="pill" href="#messages" role="tab"
						aria-controls="messages" aria-selected="false">消息</a>
				</li>
			</ul>
		</div>
	</body>
</html>

运行结果

不同颜色导航栏

使用任何 .bg-color 类来更改导航栏的背景颜色：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark和.bg-light。

如果你选择暗色背景，记得给.navbar元素添加.navbar-dark类，并为文本设置浅色。同样地，如果你选择浅色背景，给.navbar元素添加.navbar-light类，并为文本设置深色。这样可以确保背景和文本颜色之间有足够的对比度。

实例

<!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-3">
			<h1>不同颜色导航栏</h1>
			<nav class="navbar navbar-expand-sm bg-light navbar-light">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</nav>

			<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</nav>

			<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</nav>

			<nav class="navbar navbar-expand-sm bg-success navbar-dark">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</nav>

			<nav class="navbar navbar-expand-sm bg-info navbar-dark">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</nav>

			<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</nav>

			<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</nav>

			<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</nav>
		</div>
	</body>
</html>

运行结果

可以使用.navbar-brand类来设置显示品牌/Logo的导航栏。这个类会为品牌/Logo添加一些样式，以确保它在导航栏中适当地显示。你可以将品牌/Logo作为图片或文本。注意：在 Bootstrap 中，品牌标识通常放置在导航栏的左侧，并作为第一个子元素。

实例

<!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-3">
			<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
				<a class="navbar-brand" href="#">
					<img src="img/1.png" alt="品牌/Logo" height="30">
				</a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
					aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#home">首页</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#about">关于</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#services">服务</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#contact">联系我们</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</body>
</html>

运行结果

折叠导航栏

折叠导航栏可以通过以下步骤来创建：

  1. 在导航栏中添加一个按钮，并给它添加.navbar-toggler类，这将使其成为切换按钮。
  2. 在切换按钮上添加data-bs-toggle="collapse"属性，以指定它用于切换可折叠区域的功能。
  3. 在切换按钮上添加data-bs-target="#thetarget"属性，其中#thetarget是一个目标元素的ID，它需要与下一步中的可折叠区域的ID匹配。
  4. 包裹导航内容（链接）的外部<div>元素上添加.collapse navbar-collapse类，以指定它是可折叠的导航内容。

实例

<!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-3">
			<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
				<a class="navbar-brand" href="#">Logo</a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
					aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#home">首页</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#about">关于</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#services">服务</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#contact">联系我们</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</body>
</html>

这个示例代码中，按钮具有.navbar-toggler类，并通过data-bs-toggle和data-bs-target属性实现了折叠功能。导航内容包裹在一个具有.collapse navbar-collapse类的<div>元素中。保存并在浏览器中打开该HTML文件，你将看到具有可折叠导航栏的效果。在小屏幕上，点击按钮可以展开或收起导航选项。

运行结果

下拉菜单导航栏

要在导航栏中使用下拉菜单，可以按照以下步骤进行操作：

  1. 在导航栏中的目标链接上添加一个具有.dropdown类的父级元素，这将创建一个下拉菜单。
  2. 在这个父级元素下创建一个带有.dropdown-menu类的<div>元素，用于容纳下拉菜单的选项。
  3. 在父级元素上添加一个带有data-bs-toggle属性并设置为dropdown的按钮或链接，以指定它触发下拉菜单。
  4. 如果需要，可以在下拉菜单选项中添加分隔线或其他附加元素。

实例

<!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-3">
			<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
				<a class="navbar-brand" href="#">Logo</a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
					aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#home">首页</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#about">关于</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
								data-bs-toggle="dropdown" aria-expanded="false">
								下拉菜单
							</a>
							<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
								<li><a class="dropdown-item" href="#item1">项目1</a></li>
								<li><a class="dropdown-item" href="#item2">项目2</a></li>
								<li>
									<hr class="dropdown-divider">
								</li>
								<li><a class="dropdown-item" href="#item3">项目3</a></li>
							</ul>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#contact">联系我们</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</body>
</html>

在这个示例代码中，.dropdown类被应用于具有下拉菜单的导航选项。通过添加.dropdown-menu类的<ul>元素来创建下拉菜单的选项。下拉菜单通过具有data-bs-toggle属性并设置为dropdown的链接来触发。保存并在浏览器中打开该HTML文件，你将看到具有下拉菜单的导航栏。当你点击下拉菜单选项时，相应的操作将被触发。

运行结果

导航栏菜单和按钮

要在导航栏中添加表单和按钮，可以按照以下步骤进行操作：

  1. 在导航栏中的适当位置添加一个包含表单元素的 <form> 标签，并为其添加 .form-inline 类，以实现水平排列的输入框和按钮。
  2. 在 <form> 标签内部添加输入框和按钮。可以使用 <input> 元素创建文本框，通过设置 type="text" 来指定输入框的类型。另外，通过 <button> 元素或 <input> 元素创建按钮。
  3. 可以通过添加其他 HTML 元素或类来自定义表单和按钮的样式和功能。例如，可以添加标签、图标或其他类名来修饰并扩展表单和按钮的外观和行为。

注意：也可以使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签。

实例

<!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-3">
			<!-- 导航栏 -->
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<a class="navbar-brand" href="#">品牌</a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
						aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarNav">
						<ul class="navbar-nav me-auto mb-2 mb-lg-0">
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">首页</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">链接</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
									data-bs-toggle="dropdown" aria-expanded="false">
									下拉菜单
								</a>
								<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
									<li><a class="dropdown-item" href="#">操作</a></li>
									<li><a class="dropdown-item" href="#">另一个操作</a></li>
									<li>
										<hr class="dropdown-divider">
									</li>
									<li><a class="dropdown-item" href="#">其他内容</a></li>
								</ul>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
							</li>
						</ul>
						<!-- 导航栏表单 -->
						<form class="d-flex">
							<span class="input-group-text" id="basic-addon1">@</span>
							<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
							<button class="btn btn-outline-success" type="submit">Search</button>
						</form>
					</div>
				</div>
			</nav>
		</div>
	</body>
</html>

运行结果

导航栏文本

在 Bootstrap 5 中，可以使用 .navbar-text 类来设置导航栏中的非链接文本。这个类可以应用于 <span> 或 <p> 等元素上，以确保文本在水平方向上对齐，并与导航栏中其他元素具有相同的颜色和内边距。

实例

<!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-3">
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<a class="navbar-brand" href="#">品牌</a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
						aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarNav">
						<ul class="navbar-nav me-auto mb-2 mb-lg-0">
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">首页</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">链接</a>
							</li>
						</ul>
						<!-- 导航栏文本 -->
						<span class="navbar-text">
							欢迎登录
						</span>
					</div>
				</div>
			</nav>
		</div>
	</body>
</html>

运行结果

固定导航栏

在 Bootstrap 5 中，可以使用以下类来实现固定导航栏：

  • 要将导航栏固定在页面的顶部，可以使用.fixed-top类。例如： 
    <nav class="navbar fixed-top navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>

        这样导航栏就会固定在页面的顶部。

  • 要将导航栏固定在页面的底部，可以使用.fixed-bottom类。例如： 
    <nav class="navbar fixed-bottom navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>
    这样导航栏就会固定在页面的底部。
  • 如果想要导航栏在滚动经过它时固定在页面的顶部（sticky效果），可以使用.sticky-top类。例如： 
    <nav class="navbar sticky-top navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>
    这样导航栏会在滚动经过它时固定在页面的顶部。

需要注意的是，.sticky-top类在 IE11 及更早版本中不起作用，IE11 将其视为position:relative。但在现代浏览器中，这个类应该能够实现预期的效果。

实例

<!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 style="height:1500px">
		<div class="container mt-3">
			<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
				<div class="container">
					<a class="navbar-brand" href="#">固定顶部导航栏</a>
				</div>
			</nav><br>
			<div class="container-fluid" style="margin-top:80px">
				<p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
				<p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
				<p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
				<p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
			</div>
			<nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light">
				<div class="container">
					<a class="navbar-brand" href="#">固定底部导航栏</a>
				</div>
			</nav>
		</div>
	</body>
</html>

运行结果

导航栏案例

实例

<!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>
		<style>
			.search-form {
				display: flex;
				align-items: center;
			}

			.search-input {
				width: 200px;
				margin-right: 10px;
			}
		</style>
	</head>
	<body>
		<div class="container mt-3">
			<!-- 导航栏 -->
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<a class="navbar-brand" href="#">品牌</a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
						aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarNav">
						<ul class="navbar-nav me-auto mb-2 mb-lg-0">
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">首页</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">关于</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">服务</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
									data-bs-toggle="dropdown" aria-expanded="false">
									子产品
								</a>
								<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
									<li><a class="dropdown-item" href="#">子产品1</a></li>
									<li><a class="dropdown-item" href="#">子产品2</a></li>
									<li>
										<hr class="dropdown-divider">
									</li>
									<li><a class="dropdown-item" href="#">子产品3</a></li>
								</ul>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">联系我们</a>
							</li>
						</ul>
						<!-- 导航栏表单 -->
						<form class="d-flex search-form">
							<input id="search-input" class="form-control search-input" type="search"
								placeholder="Search" aria-label="Search">
							<button id="search-btn" class="btn btn-primary" type="button">搜索</button>
						</form>
					</div>
				</div>
			</nav>
		</div>
		<script>
			// 获取搜索框和按钮元素
			var searchInput = document.getElementById('search-input');
			var searchBtn = document.getElementById('search-btn');

			// 点击搜索按钮时触发跳转到百度搜索结果页
			searchBtn.addEventListener('click', function() {
				var searchText = searchInput.value;
				if (searchText.trim() !== '') {
					var url = 'https://www.baidu.com/s?wd=' + encodeURIComponent(searchText);
					window.location.href = url;
				}
			});
		</script>
	</body>
</html>

运行结果

程序员老李头
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
第十篇BootStrap轮播插件使用详解
09-02
Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。本文给大家介绍BootStrap轮播插件使用详解，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧
JAVA WEB学习课件及代码详解第三部分
07-07
JAVA的J2EE WEB学习资料，其中包括了学习视频、讲义、笔记、以及练习代码等，适合刚接触JAVA...此为第一部分，包括以下课程内容： 1、day09_JavaScript基础 2、day10_JavaScript高级 3、day11_BootStrap 4、day12_xml
Bootstrap的导航栏设计相关知识
昊虹AI笔记
10-18 1122
Bootstrap的导航栏设计相关知识
Bootstrap的下拉菜单组件相关知识
昊虹AI笔记
10-12 1709
Bootstrap的下拉菜单组件
Bootstrap5 响应式导航栏
最新发布
adendean的博客
02-07 427
我们可以使用 Bootstrap5 导航栏组件为网站或应用程序创建响应式导航标题。这些响应式导航栏在手机等小视口的设备上会折叠，但当用户单击切换按钮时会展开。但是，它在中型和大型设备（例如笔记本电脑或台式机）上将正常显示为水平。还可以轻松创建导航栏的不同样式，例如带有下拉菜单和搜索框的导航栏以及固定定位的导航栏。以下示例将展示如何创建带有链接的简单的导航栏。实际项目应用，头部代码。
Bootstrap系列之导航条（Navbar）
热门推荐
老__L的博客
06-18 1万+
为Bootstrap强大的，响应灵敏的导航头，导航栏提供文档和示例，包括对面包屑、导航、折叠插件等的支持。在开始使用导航栏之前，以下是你需要知道的导航栏内置了对一些子组件的支持。根据需要从以下选项中进行选择下面是一个包含响应式光主题导航条的所有子组件的例子，它会在lg(大)断点处自动折叠。 这个例子使用了和工具类。可以应用于大多数元素，但是锚是最好的，因为一些元素可能需要实用程序类或自定义样式。 将图片添加到可能总是需要自定义样式或工具来适当的大小。下面是一些示例。 Navbar导航链接建立在我们的选
bootstrap第八章：导航
qq_62244121的博客
12-08 2820
bootstrap导航，导航栏，痕迹导航讲解，提供实例和输出，并有导航类的总结
Bootstrap----导航栏
weixin_52247167的博客
04-14 9753
文章目录 一、导航栏 1、container 2、navbar 3、navbar-expand-xx 4、navbar-xxxx 5、bg-xxxx 6、navbar-brand 7、navbar-toggler 8、navbar-toggler-icon 9、定位 二、导航栏之切换触发器 1、data-toggle="xxx" 2、data-target="#id" 3、aria-controls="id" 4、aria-label 5、aria-expanded="bo.
bootstrap：导航栏【基础、简单、实用】
成长的嘻嘻哥
10-05 1710
寥寥几行代码，实现简洁，直观的效果，清晰的展现了bootstrap的特点和优点
Bootstrap 导航栏
杨欢博的博客
04-02 5747
一、Bootstrap 导航栏 1.1 基本导航栏 导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 导航栏上的选项可以使用<ul>元素并添加 class="navbar-nav"类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类: <nav class
100DaysOfCode:100天的代码学习和完成的项目
04-27
第11天到第27天 第28天投资组合 重新创建了我的投资组合网站balu.dev及其源代码 回到顶部 第29天-Bootstrap V4.6 通过使用引导程序的文档创建产品登录页面来学习引导程序（V4.6）。 截屏 回到顶部 第30天...
第11章 Layui以及CKEditor的使用.ppt
09-12
Java Web基础与实例教程的PPT，自己制作的PPT，将近400页，免费分享，童鞋们努力学习吧。
YiQi-ZombieCompanyClassifier:易企|僵尸企业分类系统2020年第十一届中国大学生服务外包创新创业大赛A09赛题-僵尸企业画像及分类决策树，随机森林与XGBoost投票投票支持Web端访问Bootstrap + Django + PyEcharts
03-11
该项目是2020年第十一届中国大学生服务外包创新创业大赛A09赛题-僵尸企业画像及分类我们团队提交作品的源码。该项目主要任务是要根据给定的企业信息，进行二分类，判断是僵尸企业和非僵尸企业。 本项目分为两部分，...
【干货】通过Bootstrap框架添加下拉框到导航栏
未名编程
08-16 1156
代码文件为https://v3.bootcss.com/components/#navbar-default 要使上面的代码正常工作，您需要引入Bootstrap的CSS和JavaScript文件。这些文件可以从Bootstrap官方网站下载，也可以使用CDN（内容分发网络）链接引入。以下是引入所需文件的方法：引入Bootstrap的CSS文件：在页面的部分添加以下代码，用于引入Bootstrap的CSS文件，以确保样式正确应用。
响应式布局2：手写响应式导航栏（BootStrap实现以及原生实现）
m0_54409739的博客
12-18 1828
响应式布局2：手写响应式导航栏（BootStrap实现以及原生实现）笔记
Bootstrap——导航栏
xun__xing的博客
07-31 1734
导航栏一、导航栏1.基本2.表单3.文本处理4.配色方案5.居中容器6.定位7.响应式8.拓展 一、导航栏 1.基本 导航栏需要使用.navbar 来定义，并使用 .navbar-expand{-sm|-md|-lg|-xl} 用于响应式布局以及使用配色方案Class 。 <nav class="navbar navbar-expand-lg bg-light"> <a href="#" class="navbar-brand"> <img src="http://
Bootstrap5 导航栏讲解
qq_65552364的博客
06-04 6749
通过类 .navbar 可以创建一个标准的导航栏，若要创建响应式的导航栏，可以在类 .navbar 的基础上添加类 .navbar-expand-xxl|xl|lg|md|sm 来创建 (大屏幕水平铺开，小屏幕垂直堆叠)。 navbar-dark / light‎ 可以调节导航栏文本颜色，如深色背景导航栏对应浅色文本、浅色导航栏对应深色文本。‎ data-bs-toggle 指以什么类型事件触发 data-bs-target 指事件的目标 就是样式的具体细节具体的代码 dropdown-divider
记录：前端框架Bootstrap学习使用之组件——Collapse（折叠）
lky_for_lucky的博客
11-24 3657
Collapse作用： 折叠，如左侧各级菜单栏折叠。 Collapse工作原理： 将元素的高度变为0（感兴趣的可以去看源码） Collapse使用： class="collapse" 将要折叠的内容声明为collapse类 通过按钮控制折叠（非按钮如链接a可以声明role="button"） Collapse选项：（处于按钮中） data-bs-toggle="collapse" （绑定collapse事件） data-bs-target="#target" （折叠的目标，可用
bootstrap 学习
05-26
5. 查阅Bootstrap的案例：Bootstrap已经被广泛应用于各种类型的Web应用程序，你可以查阅一些Bootstrap的案例，例如Bootstrap官方网站、Bootstrap Expo等，了解Bootstrap在实际项目中的应用和优化方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员老李头

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

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

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

打赏作者

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

抵扣说明：

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

余额充值