Bootstrap 5 導航欄
導航欄
導航欄是放置在頁面頂部的導航標題
基本導航欄
使用 Bootstrap，導航欄可以根據螢幕尺寸進行擴充套件或摺疊。
使用 .navbar 類建立標準的導航欄，後跟一個響應式摺疊類：.navbar-expand-xxl|xl|lg|md|sm（在 xxlarge、extra large、large、medium 或 small 螢幕上垂直堆疊導航欄）。
要在導航欄中新增連結，請使用 <ul> 元素（或 <div>），並帶有 class="navbar-nav"。然後新增帶有 .nav-item 類的 <li> 元素，後跟帶有 .nav-link 類的 <a> 元素。
示例
<!-- 一個灰色的水平導航欄，在小螢幕上變為垂直 -->
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<!-- 連結 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">連結 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連結 3</a>
</li>
</ul>
</div>
</nav>
自己動手試一試 »
垂直導航欄
刪除 .navbar-expand-* 類，建立一個始終垂直的導航欄。
居中導航欄
新增 .justify-content-center 類來居中導航欄。
彩色導航欄
使用任何 .bg-color 類來更改導航欄的背景顏色（.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark 和 .bg-light）。
提示： 使用 .navbar-dark 類為導航欄中的所有連結新增白色文字顏色，或使用 .navbar-light 類新增黑色文字顏色。
示例
<!-- 灰色帶黑色文字 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<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="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<!-- 黑色背景帶白色文字 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 藍色背景帶白色文字 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
自己動手試一試 »
活動/停用狀態：為 <a> 元素新增 .active 類以突出顯示當前連結，或新增 .disabled 類以指示該連結無法點選。
品牌/Logo
使用 .navbar-brand 類來突出顯示您頁面的品牌/Logo/專案名稱。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
自己動手試一試 »
當使用帶有圖片的 .navbar-brand 類時，Bootstrap 5 會自動將圖片樣式設定為垂直適應導航欄。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav>
自己動手試一試 »
導航欄文字
使用 .navbar-text 類來垂直對齊導航欄中的任何非連結元素（確保正確的填充和文字顏色）。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">導航欄文字</span>
</div>
</nav>
自己動手試一試 »
通常，尤其是在小螢幕上，您希望隱藏導航連結，並用一個按鈕替換它們，該按鈕應在單擊時顯示它們。
要建立可摺疊的導航欄，請使用帶有 class="navbar-toggler", data-bs-toggle="collapse" 和 data-bs-target="#thetarget" 的按鈕。然後將導航欄內容（連結等）包裝在一個 <div> 元素中，並帶有 class="collapse navbar-collapse"，後面跟著一個與按鈕的 data-bs-target 相匹配的 id：“thetarget”。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-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>
</ul>
</div>
</div>
</nav>
自己動手試一試 »
提示：您也可以刪除 .navbar-expand-md 類，以始終隱藏導航欄連結並顯示切換按鈕。
帶下拉選單的導航欄
導航欄也可以包含下拉選單。
示例
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">連結</a></li>
<li><a class="dropdown-item" href="#">另一個連結</a></li>
<li><a class="dropdown-item" href="#">第三個連結</a></li>
</ul>
</li>
自己動手試一試 »
導航欄表單和按鈕
您也可以在導航欄中包含表單。
示例
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">連結</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">連結</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">連結</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="搜尋">
<button class="btn btn-primary" type="button">搜尋</button>
</form>
</div>
</div>
</nav>
自己動手試一試 »
固定導航欄
導航欄也可以固定在頁面頂部或底部。
固定的導航欄在固定位置（頂部或底部）可見，與頁面滾動無關。
.fixed-top 類使導航欄固定在頂部。
使用 .fixed-bottom 類使導航欄保持在頁面底部。
使用 .sticky-top 類可在滾動經過導航欄後將其固定/停留在頁面頂部。注意：此類在 IE11 及更早版本中無效（將其視為 position:relative）。
