HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

在 Bootstrap 中创建标签式胶囊导航菜单和垂直胶囊导航菜单

bootstrapcssfront end technology更新于 2024/7/17 3:56:17

Bootstrap 提供了多种创建导航菜单的选项，例如标签式胶囊导航菜单和垂直胶囊导航菜单。要在 Bootstrap 中创建此类导航菜单，我们可以使用该框架提供的内置类和组件。这有助于创建时尚实用且适用于所有设备的导航菜单。

方法 - 1:标签式胶囊导航

在这种类型的菜单中，每个标签代表网站的不同部分。胶囊导航菜单水平排列。每当点击一个选项卡时，相应的部分就会显示出来。

算法

  • 加载 Bootstrap CSS 和 JavaScript 文件。

  • 添加一个标题为"Tutorialspoint"的容器元素。

  • 创建一个包含 3 个选项卡的导航菜单。

  • 声明每个选项卡。

  • 为每个选项卡添加一些内容。

  • 加载 Bootstrap JavaScript 和 jQuery 文件。

示例

<!DOCTYPE html>
<html>
<head>
	<title>Tabbed Pill Navigation Menu Example</title>
	<!-- Add Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
   <!-- Container for the navigation menu and content -->
	<div class="container mt-4">
		<!-- Page title -->
		<h1>Tutorialspoint</h1>
		<!-- Navigation menu with tabs as pills -->
		<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
			<!-- Home tab -->
			<li class="nav-item">
				<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
			</li>
			<!-- Profile tab -->
			<li class="nav-item">
				<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
			</li>
			<!-- Contact tab -->
			<li class="nav-item">
				<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
			</li>
		</ul>
		<!-- Content for each tab -->
		<div class="tab-content" id="pills-tabContent">
			<!-- Home tab content -->
			<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
				<h1>Home</h1>
				<p>Lorem ipsum dolor sit amet.</p>
			</div>
			<!-- Profile tab content -->
			<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
				<h1>Profile</h1>
				<p>Lorem ipsum dolor sit amet.</p>
			</div>
			<!-- Contact tab content -->
			<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
				<h1>Contact</h1>
				<p>Lorem ipsum dolor sit amet.</p>
			</div>
		</div>
	</div>
	<!-- Add Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

方法 - 2:垂直胶囊式导航

另一方面，垂直胶囊式导航是一种导航菜单，其中链接垂直排列，而不是水平排列。这有助于打造流畅的用户体验。

算法

  • 创建一个标题为"Tutorialspoint"的容器。

  • 该容器应具有一行两列。

  • 第一列包含垂直导航菜单，第二列显示所选菜单项的内容。

  • 菜单使用"nav"和"nav-pill"类创建，使菜单项以胶囊状样式垂直显示。

  • 每个菜单项都是一个带有唯一"href"的锚标签，该标签链接到显示相应内容的"选项卡窗格"。

  • 每个菜单的内容显示在"选项卡窗格"中，该窗格由"选项卡内容"类包裹。

  • JavaScript 代码包含 jQuery 库和一些 Bootstrap JavaScript 插件，以使菜单正常工作。

示例

<!DOCTYPE html>
<html>
<head>
	<title>Vertical Pill Navigation Menu</title>
	<!-- Add Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

	<!-- Add jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<!-- Add Popper.js -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Add Bootstrap JS -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

	<style>
		body {
			background-color: #f8f9fa;
		}
		/* Style for nav links */
		.nav-pills .nav-link {
			color: #fff;
			background-color: #61a4f0;
			border-radius: 0;
			margin: 5px 0;
			font-weight: bold;
			padding: 10px;
			border: none;
			transition: all 0.2s ease-in-out;
		}
		/* Style for active and hover nav links */
		.nav-pills .nav-link:hover,
		.nav-pills .nav-link.active {
			background-color: #007bff;
			color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		}
		/* Remove focus outline from nav links */
		.nav-pills .nav-link:focus {
			box-shadow: none;
			outline: none;
		}
		/* Style for tab content */
		.tab-content {
			background-color: #fff;
			padding: 20px;
			border-radius: 0 4px 4px 4px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Tutorialspoint</h1>
		<div class="row">
			<div class="col-md-3">
				<!-- Vertical navigation pills -->
				<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
					<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
					<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
					<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
					<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
				</div>
			</div>
			<div class="col-md-9">
				<!-- Tab content -->
				<div class="tab-content" id="v-pills-tabContent">
					<!-- Home tab -->
					<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
						<h3>Home</h3>
						<p>Welcome to the home page!</p>
					</div>
					<!-- Profile tab -->
					<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
						<h3>Profile</h3>
						<p>Lorem ipsum dolor.</p>
					</div>
					<!-- Messages tab -->
					<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
						<h3>Messages</h3>
						<p>Lorem ipsum dolor.</p>
					</div>
					<!-- Settings tab -->
					<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
						<h3>Settings</h3>
						<p>Lorem ipsum dolor.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
   <!-- Add Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

结论

这类菜单可以改善网站的用户界面和用户体验。

一些其他的实现方式包括:

  • 使用自定义 CSS 和 JavaScript 函数创建自定义菜单。

  • 除了 Bootstrap，Materialize 和 Bulma 等 CSS 框架也提供了类似的功能。

  • 我们也可以使用一些第三方库，例如 jQuery UI、UIkit 和 Semantic UI 来创建此类导航菜单。

有用资源

打印