Bootstrap5導航欄：快速實現響應式導航菜單

快速實現響應式導航菜單（Bootstrap5 導航欄基礎用法）¶

1. 引入 Bootstrap5 資源¶

要使用 Bootstrap5 的導航欄，首先需要在 HTML 中引入 Bootstrap 的 CSS 和 JavaScript 文件。最快捷的方式是通過 CDN 鏈接，無需本地安裝：

<!-- Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap5 JS (需放在body末尾或使用defer) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. 基本導航欄結構¶

Bootstrap5 導航欄的核心是 <nav> 標籤配合 .navbar 類，並通過以下關鍵組件實現功能：

品牌標識：.navbar-brand（通常放 Logo 或網站名稱）
導航鏈接容器：.navbar-nav（包裹導航項）
單個導航項：.nav-item（<li> 標籤）
導航鏈接：.nav-link（<a> 標籤）
移動端摺疊按鈕：.navbar-toggler（漢堡菜單按鈕）
摺疊內容：.collapse.navbar-collapse（導航鏈接摺疊區域）

示例代碼：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <!-- 品牌標識 -->
  <div class="container-fluid">
    <a class="navbar-brand" href="#">我的網站</a>

    <!-- 移動端摺疊按鈕 -->
    <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarContent" 
            aria-controls="navbarContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 摺疊導航內容 -->
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首頁</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">產品</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdownMenu" 
             role="button" data-bs-toggle="dropdown" aria-expanded="false">
            服務
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
            <li><a class="dropdown-item" href="#">服務1</a></li>
            <li><a class="dropdown-item" href="#">服務2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

3. 響應式摺疊邏輯¶

通過 .navbar-expand-* 類控制導航欄在不同屏幕的顯示狀態：
- .navbar-expand-lg：在 lg（≥992px）及以上屏幕展開導航，小屏幕自動摺疊爲漢堡菜單。
- 斷點說明：Bootstrap5 斷點包括 sm(576px)、md(768px)、lg(992px)、xl(1200px)，可根據需求選擇展開級別。

效果：小屏幕下點擊漢堡按鈕，導航鏈接會從頂部向下展開；大屏幕直接顯示全部鏈接。

4. 導航欄樣式定製¶

背景色：通過 .bg-* 類設置（如 bg-primary 藍色、bg-light 淺灰）。
文字顏色：.navbar-dark（白色文字）或 .navbar-light（黑色文字）配合背景色使用。
激活狀態：.active 類標記當前頁導航項（自動高亮）。
下拉菜單：點擊 .dropdown-toggle 按鈕展開，默認帶動畫效果。

示例：

<!-- 黑色文字+淺灰背景導航欄 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 導航項高亮 -->
  <li class="nav-item">
    <a class="nav-link active" href="#">首頁</a> <!-- active 類自動高亮 -->
  </li>
  <!-- 自定義背景色 -->
  <li class="nav-item">
    <a class="nav-link" href="#" style="background-color: #f0f0f0;">產品</a>
  </li>
</nav>

5. 常見擴展功能¶

固定頂部：給導航欄加 .fixed-top 類，使其滾動時始終固定在頂部：

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">

導航欄右側內容：可添加搜索框、按鈕等，用 .d-flex 控制對齊：

  <form class="d-flex">
    <input class="form-control me-2" type="search" placeholder="搜索">
    <button class="btn btn-outline-light" type="submit">搜索</button>
  </form>

導航欄間距：用 .my-3（上下邊距）或 .px-4（左右邊距）調整容器大小。

6. 注意事項¶

CDN 順序：先引入 CSS，再引入 JS（或放在 body 末尾）。
摺疊狀態驗證：確保 data-bs-target 與摺疊容器的 id 一致。
無障礙屬性：添加 aria-controls、aria-expanded 等屬性，提升屏幕閱讀器兼容性。

通過以上內容，你已掌握 Bootstrap5 導航欄的核心用法。只需複製示例代碼，替換內容即可快速實現響應式導航菜單，無需從零編寫 CSS！