導(dǎo)航

導(dǎo)航菜單

如果要創(chuàng)建簡單的水平菜單，請將 .nav 類添加到 <ul> 元素，然后為每個 <li> 元素添加 .nav-item 并將 .nav-link 類添加到它們的鏈接：

實例

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

對齊導(dǎo)航欄

添加 .justify-content-center 類使導(dǎo)航居中，添加 .justify-content-end 類使導(dǎo)航右對齊。

實例

<!-- 居中的導(dǎo)航 -->
<ul class="nav justify-content-center">

<!-- 右對齊的導(dǎo)航 -->
<ul class="nav justify-content-end">

垂直導(dǎo)航欄

添加 .flex-column 類可創(chuàng)建垂直導(dǎo)航：

實例

<ul class="nav flex-column">

選項卡

請使用 .nav-tabs 類將導(dǎo)航菜單轉(zhuǎn)換為導(dǎo)航選項卡。并將 .active 類添加到活動/當(dāng)前鏈接。如果您希望選項卡可切換，請參閱本頁的最后一個例子。

實例

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" 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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">禁用</a>
  </li>
</ul>

膠囊

使用 .nav-pills 類可將導(dǎo)航菜單設(shè)置為導(dǎo)航膠囊。如果您希望膠囊可切換，請參閱本頁的最后一個例子。

實例

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">禁用</a>
  </li>
</ul>

等寬的選項卡/膠囊導(dǎo)航

請使用 .nav-justified 類（等寬）對齊標(biāo)簽/膠囊：

實例

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

膠囊下拉菜單

實例

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">活動</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">鏈接 1</a></li>
      <li><a class="dropdown-item" href="#">鏈接 2</a></li>
      <li><a class="dropdown-item" href="#">鏈接 3</a></li>
    </ul>
  </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>

選項卡下拉菜單

實例

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">活動</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">鏈接 1</a></li>
      <li><a class="dropdown-item" href="#">鏈接 2</a></li>
      <li><a class="dropdown-item" href="#">鏈接 3</a></li>
    </ul>
  </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>

可切換的 / 動態(tài)選項卡

如需使選項卡可切換，請將 data-toggle="tab" 屬性添加到每個鏈接。然后為每個選項卡添加有唯一 ID 的 .tab-pane 類，并將它們包裝在帶有 .tab-content 類的 <div> 元素中。

如果您希望選項卡在單擊時能夠淡入淡出，請將 .fade 類添加到 .tab-pane：

實例

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

可切換的 / 動態(tài)膠囊導(dǎo)航

相同的代碼適用于導(dǎo)航；僅將 data-toggle 屬性更改為 data-toggle="pill" 即可：

實例

<!--導(dǎo)航膠囊 -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">春日</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">初夏</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">山行</a>
  </li>
</ul>

<!-- 選項卡窗格 -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>