Bootstrap 5 Navbar

導航欄

導航欄是位於頁面頂部的導航頁眉：

基礎的導航欄

通過使用 Bootstrap，導航欄可以擴展或折疊，具體取決於屏幕大小。

Gumamit ng: .navbar 類創建標準導航欄，然後是響應式折疊類：.navbar-expand-xxl|xl|lg|md|sm（在特大、超大、大、中型設備上水平排列，或小屏幕上垂直堆疊導航欄）。

如需在導航欄中添加鏈接，請使用 class="navbar-nav" 的 <ul> 元素（或 <div>）。然後添加帶有 .nav-item 類的 <li> 元素，後跟帶有 .nav-link 類的 <a> 元素：

Halimbawa

<-- 灰色的水平導航欄在小型屏幕上變為垂直 -->
<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>

Subukan Ngayon Personal

垂直導航欄

刪除 .navbar-expand-* 類可創建始終垂直的導航欄：

Halimbawa

<-- 灰色的垂直導航欄 -->
<nav class="navbar bg-light">
  ...
</nav>

Subukan Ngayon Personal

居中的導航欄

添加 .justify-content-center 類可將導航欄居中：

Halimbawa

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Subukan Ngayon Personal

彩色導航欄

請使用任何 .bg-color 類來更改導航欄的背景顏色：

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Tip:Gumamit ng: .navbar-dark 類為導航欄中的所有鏈接添加白色文本顏色，或使用 .navbar-light 類添加黑色文本顏色。

Halimbawa

<-- 灰色背景，白色文本 -->
<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="#">活动</a>
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</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>

Subukan Ngayon Personal

活动/禁用状态：将 .active 类添加到 <a> 元素可突出显示当前链接，或添加 .disabled 类来指示链接不可点击。

品牌 / 标志

.navbar-brand 类用于突出显示页面的品牌/标志/项目名称：

Halimbawa

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Subukan Ngayon Personal

如果将 .navbar-brand 类与图像一起使用时，Bootstrap 5 将自动设置图像样式，在垂直方向适应导航栏。

Halimbawa

<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>

Subukan Ngayon Personal

导航栏文本

Gumamit ng: .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。

Halimbawa

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">导航栏文本</span>
  </div>
</nav>

Subukan Ngayon Personal

很多时候，尤其是在小屏幕上，您希望隐藏导航链接并用一个按钮替代它们，并在单击该按钮时显示它们。

如需创建可折叠导航栏，请使用已设置 class="navbar-toggler"、data-bs-toggle="collapse" 和 data-bs-target="#thetarget" 的按钮。然后将导航栏内容（链接等）包裹在 class="collapse navbar-collapse" 的 <div> 元素中，后跟与按钮的 data-bs-target 匹配的 id："thetarget"。

Halimbawa

<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="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Subukan Ngayon Personal

Tip:Maaari ka ring tanggalin: .navbar-expand-md Ang klase ay para sa palaging saklawin ang link ng navigation bar at ipakita ang switch button.

Dropdown menu navigation bar

Maaaring maglaman ang navigation bar ng dropdown menu:

Halimbawa

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown Menu</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link</a></li>
    <li><a class="dropdown-item" href="#">Iba pang link</a></li>
    <li><a class="dropdown-item" href="#">Ikatlong link</a></li>
  </ul>
</li>

Subukan Ngayon Personal

Menu at button ng navigation bar

Maaari ka ring kasama ang form sa navigation bar:

Halimbawa

<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)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

Subukan Ngayon Personal

Navigation bar na nakatataas o nakababang na pinagkakaroonan

Ang navigation bar ay maaari ring itago sa tuktok o sa ibaba ng pahina.

Ang fixed navigation bar ay mananatili sa nakatataas o nakababang na pinagkakaroonan na hindi nakasalalay sa paggalaw ng pahina (nakaraang o sa tuktok).

.fixed-top Ang klase na ito ay gumagawa ng pag-iwan ng navigation bar sa pinagkakaroonan ng pahina.Top:

Halimbawa

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Subukan Ngayon Personal

Gumamit ng klase .fixed-bottom upang itago ang navigation bar sa ibaba ng pahina:

Halimbawa

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Subukan Ngayon Personal

Gumamit ng: .sticky-top Ang klase na ito ay gumagawa ng pag-iwan o nananatili ng navigation bar sa pinagkakaroonan ng pahina habang ito ay nagsasalakay sa ito.Top.

Komento:Ang ganitong uri ay hindi gumagana sa IE11 at mas maaga na bersyon (isa ito bilang position:relative)

Halimbawa

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

Subukan Ngayon Personal