導(dǎo)航欄

導(dǎo)航欄

導(dǎo)航欄是位于頁(yè)面頂部的導(dǎo)航頁(yè)眉：

基礎(chǔ)的導(dǎo)航欄

通過(guò)使用 Bootstrap，導(dǎo)航欄可以擴(kuò)展或折疊，具體取決于屏幕大小。

請(qǐng)使用 .navbar 類(lèi)創(chuàng)建標(biāo)準(zhǔn)導(dǎo)航欄，然后是響應(yīng)式折疊類(lèi)：.navbar-expand-xxl|xl|lg|md|sm（在特大、超大、大、中型設(shè)備上水平排列，或小屏幕上垂直堆疊導(dǎo)航欄）。

如需在導(dǎo)航欄中添加鏈接，請(qǐng)使用 class="navbar-nav" 的 <ul> 元素（或 <div>）。然后添加帶有 .nav-item 類(lèi)的 <li> 元素，后跟帶有 .nav-link 類(lèi)的 <a> 元素：

實(shí)例

<!-- 灰色的水平導(dǎo)航欄在小型屏幕上變?yōu)榇怪?-->
<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>

垂直導(dǎo)航欄

刪除 .navbar-expand-* 類(lèi)可創(chuàng)建始終垂直的導(dǎo)航欄：

實(shí)例

<!-- 灰色的垂直導(dǎo)航欄 -->
<nav class="navbar bg-light">
  ...
</nav>

居中的導(dǎo)航欄

添加 .justify-content-center 類(lèi)可將導(dǎo)航欄居中：

實(shí)例

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

彩色導(dǎo)航欄

請(qǐng)使用任何 .bg-color 類(lèi)來(lái)更改導(dǎo)航欄的背景顏色：

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

提示：請(qǐng)使用 .navbar-dark 類(lèi)為導(dǎo)航欄中的所有鏈接添加白色文本顏色，或使用 .navbar-light 類(lèi)添加黑色文本顏色。

實(shí)例

<!-- 灰色背景，白色文本 -->
<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="#">活動(dòng)</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>
  </div>
</nav>

<!-- 黑色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

<!-- 藍(lán)色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

活動(dòng)/禁用狀態(tài)：將 .active 類(lèi)添加到 <a> 元素可突出顯示當(dāng)前鏈接，或添加 .disabled 類(lèi)來(lái)指示鏈接不可點(diǎn)擊。

品牌 / 標(biāo)志

.navbar-brand 類(lèi)用于突出顯示頁(yè)面的品牌/標(biāo)志/項(xiàng)目名稱(chēng)：

實(shí)例

<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 類(lèi)與圖像一起使用時(shí)，Bootstrap 5 將自動(dòng)設(shè)置圖像樣式，在垂直方向適應(yīng)導(dǎo)航欄。

實(shí)例

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

導(dǎo)航欄文本

請(qǐng)使用 .navbar-text 類(lèi)垂直對(duì)齊導(dǎo)航欄中非鏈接的任何元素（確保正確的內(nèi)邊距和文本顏色）。

實(shí)例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">導(dǎo)航欄文本</span>
  </div>
</nav>

很多時(shí)候，尤其是在小屏幕上，您希望隱藏導(dǎo)航鏈接并用一個(gè)按鈕替代它們，并在單擊該按鈕時(shí)顯示它們。

如需創(chuàng)建可折疊導(dǎo)航欄，請(qǐng)使用已設(shè)置 class="navbar-toggler"、data-bs-toggle="collapse" 和 data-bs-target="#thetarget" 的按鈕。然后將導(dǎo)航欄內(nèi)容（鏈接等）包裹在 class="collapse navbar-collapse" 的 <div> 元素中，后跟與按鈕的 data-bs-target 匹配的 id："thetarget"。

實(shí)例

<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 類(lèi)以始終隱藏導(dǎo)航欄鏈接并顯示切換按鈕。

下拉菜單導(dǎo)航欄

導(dǎo)航欄可容納下拉菜單：

實(shí)例

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">下拉菜單</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">鏈接</a></li>
    <li><a class="dropdown-item" href="#">另一個(gè)鏈接</a></li>
    <li><a class="dropdown-item" href="#">第三個(gè)鏈接</a></li>
  </ul>
</li>

導(dǎo)航欄菜單和按鈕

您還可以在導(dǎo)航欄中包含表單：

實(shí)例

<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="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

位置固定的導(dǎo)航欄

導(dǎo)航欄也可以固定在頁(yè)面的頂部或底部。

固定導(dǎo)航欄會(huì)在獨(dú)立于頁(yè)面滾動(dòng)的固定位置（頂部或底部）保持可見(jiàn)。

.fixed-top 類(lèi)使導(dǎo)航欄固定在頁(yè)面的頂部：

實(shí)例

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

請(qǐng)使用 .fixed-bottom 類(lèi)把導(dǎo)航欄停留在頁(yè)面底部：

實(shí)例

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

請(qǐng)使用 .sticky-top 類(lèi)使導(dǎo)航欄在滾動(dòng)經(jīng)過(guò)它時(shí)固定/停留在頁(yè)面的頂部。

注釋?zhuān)?/span>此類(lèi)在 IE11 及更早版本中不起作用（將其視為 position:relative）。

實(shí)例

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