以下是您提供的文本的繁體中文翻譯，使用Markdown格式：

Bootstrap - Navs & tabs

# Bootstrap - 导航和标签页

## 引言

你好，有志於網頁開發的們！今天，我們將深入探討網頁設計中最常見的组件之一：導航菜單和標籤頁。這些元素就像網站的道路標誌，引導用戶前往不同的部分和內容。使用Bootstrap的導航和標籤组件，我們可以創建出時尚、響應式的導航系統，適用於所有設備。那麼，讓我們捋起袖子開始編程吧！

## 基础導航

讓我們從基礎開始。Bootstrap提供了一種簡單的方法來使用`.nav`類別創建導航菜單。以下是一個基本示例：

```html
<ul class="nav">
  <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>

這段代碼創建了一個水平導航鏈接列表。active類別會突出當前頁面，而disabled類別會將不可點擊的鏈接灰顯。

可用的樣式

Bootstrap為導航菜單提供了多種樣式。讓我們看看兩種流行的樣式：

標籤導航

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

這會創建一個標籤導航菜單，非常適合將內容組織到不同的部分。

药丸導航

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

藥丸樣式為導航鏈接提供了按鈕般的外觀。

水平對齊

您可以輕鬆更改導航項目的對齊方式。以下是如何操作的：

<ul class="nav justify-content-center">
  <!-- 導航項目在此 -->
</ul>

<ul class="nav justify-content-end">
  <!-- 導航項目在此 -->
</ul>

justify-content-center類別會將導航項目居中對齊，而justify-content-end類別會將其對齊到右邊。

使用彈性工具

Bootstrap的彈性工具為您提供了更多對導航佈局的控制：

<nav class="nav flex-column">
  <a class="nav-link active" href="#">活動</a>
  <a class="nav-link" href="#">鏈接</a>
  <a class="nav-link" href="#">鏈接</a>
  <a class="nav-link disabled" href="#">禁用的</a>
</nav>

這會創建一個垂直導航菜單，使用flex-column類別。

關於無障礙性

在構建導航菜單時，考慮無障礙性是至关重要的。在適當的地方使用<nav>元素，並為活動項目添加aria-current="page"：

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">活動</a>
  <!-- 其他導航項目 -->
</nav>

使用下拉菜單

導航菜單可以包括下拉菜單以構建更複雜的導航結構：

<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="#" role="button" aria-expanded="false">下拉菜單</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">動作</a></li>
      <li><a class="dropdown-item" href="#">另一個動作</a></li>
      <li><a class="dropdown-item" href="#">在這裡的另一些東西</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">分離的鏈接</a></li>
    </ul>
  </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="#" role="button" aria-expanded="false">下拉菜單</a>
    <ul class="dropdown-menu">
      <!-- 下拉菜單項目 -->
    </ul>
  </li>
  <!-- 其他導航項目 -->
</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="#" role="button" aria-expanded="false">下拉菜單</a>
    <ul class="dropdown-menu">
      <!-- 下拉菜單項目 -->
    </ul>
  </li>
  <!-- 其他導航項目 -->
</ul>

JavaScript 行為

Bootstrap的JavaScript插件可以為您的導航和標籤添加動態行為。以下是如何創建一組帶有內容面板的標籤：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首頁</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">個人資料</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">首頁內容...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">個人資料內容...</div>
</div>

這段代碼創建了一組標籤，點擊時會切換不同的內容面板。

無障礙性

為了使您的標籤無障礙，請使用role、aria-controls、aria-selected和aria-labelledby屬性，如前例所示。

使用數據屬性

數據屬性讓您可以在不編寫JavaScript的情況下控制標籤行為：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首頁</button>
  </li>
  <!-- 其他標籤按鈕 -->
</ul>

data-bs-toggle="tab"和data-bs-target="#home"屬性在不添加額外JavaScript的情況下啟用標籤功能。

通過JavaScript

您也可以通過JavaScript激活標籤：

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

這段代碼為每個標籤按鈕添加了點擊事件監聽器，點擊時激活相應的標籤。

淡化效果

要為標籤添加淡化效果，請使用fade類：

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

這會在切換標籤時創造平滑的轉場效果。

以上就是使用Bootstrap創建和自定義導航菜單和標籤頁的方法。記住，熟練來自練習，所以嘗試在您自己的项目中實驗這些组件。快樂編程！

方法	描述
`Tab.getInstance(element)`	獲取與DOM元素相關聯的標籤實例
`Tab.getOrCreateInstance(element)`	返回與DOM元素相關聯的標籤實例，或者創建一個新的
`show()`	選擇給定的標籤並顯示其相關聯的面板
`dispose()`	摧毀元素的標籤

Credits: Image by storyset