Skip to content

建立 2026-09-15 更新 2026-09-15

導覽列

Navbar 是網站最上方的導覽：品牌、連結、在窄螢幕折成漢堡選單。它同時用到 Collapse 外掛，所以頁面必須載入 JS bundle。對應官方 Navbar。

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">站名</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#mainNav"
            aria-controls="mainNav" aria-expanded="false" aria-label="展開選單">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">首頁</a></li>
        <li class="nav-item"><a class="nav-link" href="#">關於</a></li>
      </ul>
    </div>
  </div>
</nav>

幾個容易漏的點：

  • navbar-expand-lg：從 large 以上才展開；改成 md 會更早展開。
  • data-bs-target 必須對上折疊區塊的 id。
  • 內容放進 container，才會跟正文對齊，而不是貼齊螢幕邊緣。
  • 深色底用 data-bs-theme="dark" 加在 nav 上，品牌與連結顏色才會反白。

推薦影音

來源：The Net Ninja　約 13 分鐘

從零組一條響應式 navbar，含 container、toggler 與 collapse。