Bootstrap 5 Navs
Nav 選單
要建立簡單的水平選單，請將 .nav 類新增到 <ul> 元素，然後為每個 <li> 新增 .nav-item，併為連結新增 .nav-link 類
示例
<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>
自己動手試一試 »
對齊 Nav
新增 .justify-content-center 類以居中導航，並新增 .justify-content-end 類以右對齊導航。
示例
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
自己動手試一試 »
垂直 Nav
新增 .flex-column 類以建立垂直導航
標籤頁
使用 .nav-tabs 類將導航選單轉換為導航標籤。新增 .active 類到活動/當前連結。如果您希望標籤可切換，請參閱此頁面的最後一個示例。
示例
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
自己動手試一試 »
膠囊元件
使用 .nav-pills 類將導航選單轉換為導航藥丸。如果您希望藥丸可切換，請參閱此頁面的最後一個示例。
示例
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
自己動手試一試 »
帶邊框的標籤/藥丸
使用 .nav-justified 類來對齊標籤/藥丸（等寬）
示例
<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
自己動手試一試 »
帶下拉選單的藥丸
示例
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 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>
自己動手試一試 »
帶下拉選單的標籤
示例
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 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>
自己動手試一試 »
可切換/動態標籤頁
主頁
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
要使標籤頁可切換，請將 data-toggle="tab" 屬性新增到每個連結。然後為每個標籤頁新增一個帶有唯一 ID 的 .tab-pane 類，並將它們包裝在一個類為 .tab-content 的 <div> 元素中。
如果您希望在點選時標籤頁淡入淡出，請將 .fade 類新增到 .tab-pane。
示例
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
自己動手試一試 »
可切換/動態膠囊元件
主頁
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
相同的程式碼適用於膠囊元件；只需將 data-toggle 屬性更改為 data-toggle="pill"。
示例
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
自己動手試一試 »
