首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > css教程

在 Bootstrap 中创建选项卡式药丸和垂直药丸导航菜单

WBOY
WBOY 转载
2023-08-27 23:05:09 381浏览

在 Bootstrap 中创建选项卡式药丸和垂直药丸导航菜单

Bootstrap provides several options for creating navigation menus, like tabbed and vertical pills. To create this kind of navigation menus in Bootstrap, we can use the built-in classes and components offered by the framework. This aids in creating a stylish and functional navigation menu that works well on all devices.

方法 - 1：选项卡式导航

In this type of menus each tab represents a different section of the website. The pills are arranged horizontally. Whenever a tab is clicked, the corresponding section gets displayed.

Algorithm

  • 加载Bootstrap的CSS和JavaScript文件。

  • Add a container element with the heading "Tutorialspoint".

  • Create a navigation menu with 3 tabs.

  • 声明每个选项卡。

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

  • Load the Bootstrap JavaScript and jQuery files.

Example

<!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：垂直药丸导航

垂直标签页，另一方面，是一种导航菜单类型，其中链接垂直排列而不是水平排列。这有助于创建流畅的用户体验。

Algorithm

  • 创建一个带有标题“Tutorialspoint”的容器。

  • The container should have one row and two columns.

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

  • 菜单是使用"nav"和"nav-pill"类创建的，这使得菜单项以类似药丸的垂直样式显示。

  • 每个项目都是一个带有唯一“href”的锚点标签，该标签链接到显示相应内容的“选项卡面板”。

  • The content of each menu is displayed in a "tab pane" wrapped in a "tab content" class.

  • The JavaScript code includes the jQuery library and some Bootstrap JavaScript plugins to make the menu work.

Example

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

结论

这些类型的菜单可以提升网站的用户界面和用户体验。

Some of the alternate ways of implementation includes,

  • 使用自定义的CSS和javascript函数创建一个自定义菜单。

  • 除了Bootstrap之外，像Materialize和Bulma这样的CSS框架提供类似的功能。

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

以上就是在 Bootstrap 中创建选项卡式药丸和垂直药丸导航菜单的详细内容，更多请关注php中文网其它相关文章！

PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除
上一条：使用 CSS 进行维护 下一条：如何使用CSS创建渐变阴影？

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！