資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 Bootstrap 中建立選項卡式藥丸和垂直藥丸導航選單
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）來建立這種導航選單。
更新於： 2023年5月19日
574 次檢視
廣告