Bootstrap 4 導航
導航選單
如果您想建立一個簡單的水平選單，請將 .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>
自己動手試一試 »
對齊導航
新增 .justify-content-center 類來居中導航，新增 .justify-content-end 類來右對齊導航。
示例
<!-- 居中導航 -->
<ul class="nav justify-content-center">
<!-- 右對齊導航 -->
<ul class="nav justify-content-end">
自己動手試一試 »
垂直導航
新增 .flex-column 類以建立垂直導航
標籤頁
使用 .nav-tabs 類將導航選單轉換為導航標籤。為活動/當前連結新增 .active 類。如果您想使標籤可切換，請參閱此頁面上的最後一個示例。
示例
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" 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-pills 類將導航選單轉換為導航膠囊。如果您想使膠囊可切換，請參閱此頁面上的最後一個示例。
示例
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" 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-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="#">活動</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-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>
自己動手試一試 »
帶下拉選單的標籤
示例
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">活動</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-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>
自己動手試一試 »
可切換/動態標籤頁
主頁
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-toggle="tab" href="#home">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">選單 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">選單 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"。
示例
<!-- 導航膠囊 -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">選單 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">選單 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>
自己動手試一試 »
完整的 Bootstrap 4 導航參考
有關所有標籤選項、方法和事件的完整參考，請訪問我們的 Bootstrap 4 JS 標籤參考。
