Bootstrap - 導航和選項卡

上一頁
下一頁

本章將討論 Bootstrap 的導航和選項卡。使用 .nav 類建立導航選單，使用 .tab 類建立選項卡式導航選單。

基本導航

所有型別的 Bootstrap 導航元件都是使用基本類 .nav（使用彈性盒構建的元件）構建的。導航元件可用於新增連結列表，以便在網站內瀏覽到其他頁面。

  • 專案可以新增到 .nav-item 類中。

  • 要在專案類中新增連結，請使用 .nav-link 類。

    • .nav 元件中沒有 .active 狀態。在以下示例中使用了該類，以表明此類沒有唯一的樣式。

    要向螢幕閱讀器等輔助技術傳達活動連結，請使用 aria-current 屬性，其值為當前頁面的 page 或如果當前專案已設定則為 true。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav bg-warning mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoint</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"  href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    當專案順序很重要時，使用 <ul>、<ol> 或使用 <nav> 建立自己的。導航連結的行為類似於導航專案，因為 .nav 使用 display: flex 且沒有額外的標記。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav bg-light mt-2">
      <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link disabled">Services</a>
      <a class="nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

    可用樣式

    使用修飾符和實用工具來更改 .nav 元件的樣式，如以下部分所示

    水平對齊

    • 使用 彈性盒實用工具類 修改導航的水平對齊方式。預設情況下，導航左對齊。導航可以輕鬆地居中或右對齊。

    • 對於居中對齊，使用 CSS 類 .justify-content-center。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav justify-content-center bg-warning mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    要實現右對齊，請使用 CSS 類 .justify-content-end。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav justify-content-end bg-light mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    垂直

    使用 .flex-column 實用工具類（更改彈性盒專案方向）來堆疊導航專案。使用響應式版本在各種視口中堆疊它們（例如，.flex-sm-column）。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav flex-column bg-light mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    即使不使用 <ul>，也可以實現垂直導航。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav flex-column bg-light mt-2">
      <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link disabled">Services</a>
      <a class="nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

    選項卡

    將 .nav-tabs 類新增到 .nav 以建立選項卡式導航選單。使用它們使用 選項卡 JavaScript 外掛 建立可選項卡區域。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-tabs mt-2">
      <li class="nav-item">
        <a class="nav-link active bg-light" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link  disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"  href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    藥丸

    透過將 .nav-tab 替換為 .nav-pills 在 .nav 類中建立導航藥丸選單。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    下劃線

    使用 .nav-underline 類建立帶下劃線的導航選單。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-underline mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    填充和對齊

    使用 .nav-fill 在 .nav-item 中均勻填充可用空間。即使每個導航專案的寬度不同，水平空間也會被完全佔用。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills nav-fill bg-light mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    使用基於 <nav> 的導航，您可以跳過 .nav-item 並使用 .nav-link 來設定 <a> 元素的樣式。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav nav-pills nav-fill bg-light mt-2">
      <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link disabled">Services</a>
      <a class="nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

    對於等寬元素，使用 .nav-justified。這將使用導航連結填充水平空間，每個導航專案具有相同的寬度，這與前面提到的 .nav-fill 不同。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills nav-justified bg-light mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    一個類似於 .nav-fill 演示的示例，但使用基於 <nav> 元素的導航。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav nav-pills nav-justified bg-light mt-2">
      <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link disabled">Services</a>
      <a class="nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

    使用彈性盒實用工具類

    • 如果您需要響應式導航變體，請使用 彈性盒實用工具類。

    • 這些實用工具類提供了在所有各種斷點上進行更多自定義的功能。導航將在最低斷點處堆疊，然後從小型斷點開始切換到跨越整個寬度的水平佈局。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav class="nav nav-pills flex-column flex-sm-row bg-warning mt-2">
      <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      <a class="flex-sm-fill text-sm-center nav-link" href="#">Home</a>
      <a class="flex-sm-fill text-sm-center nav-link disabled">Services</a>
      <a class="flex-sm-fill text-sm-center nav-link" href="#">About us</a>
    </nav>
  </body>
  </html>

    關於輔助功能

    • 對於使用導航的導航欄，請將 role="navigation" 新增到 <ul> 的父容器中，或者將整個導航包裝在 <nav> 元素中。不要將角色新增到 <ul> 以避免輔助技術將其宣佈為列表。

    • 樣式為 .nav-tabs 的導航欄不應具有屬性 role="tablist"、role="tab" 或 role="tabpanel"。這專門適用於動態選項卡式介面，如 ARIA 編寫實踐指南 的選項卡模式中所述。檢視 JavaScript 行為 部分以獲取動態選項卡式介面的示例。

    • 在動態選項卡式介面上，aria-current 屬性是不必要的，因為 JavaScript 透過在活動選項卡上使用 aria-selected="true" 已經管理了選中狀態。

    使用下拉選單

    可以使用 HTML 和下拉選單 JavaScript 外掛新增下拉選單。

    帶有下拉選單的選項卡

    要建立帶下拉選單的選項卡，請將 .nav-tabs 類新增到 <ul> 元素。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-tabs bg-warning mt-2">
      <li class="nav-item">
        <a class="nav-link active bg-light" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Home</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    帶有下拉選單的藥丸

    將 .nav-pills 類新增到 <ul> 以將下拉選單顯示為藥丸。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills bg-warning mt-2">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Tutorialspoints</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Home</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
    </ul>
  </body>
  </html>

    JavaScript 行為

    使用導航選項卡和藥丸透過 bootstrap.js 檔案和 選項卡 JavaScript 外掛生成本地內容的可選項卡窗格。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-tabs bg-warning mt-2" id="myTab" role="list">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tutorialspoints" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Tutorialspoints</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Home</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Services-disabled</button>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active bg-light" id="tutorialspoints" role="tabpanel" aria-labelledby="tutTab" tabindex="0">Tutorialspoints Tab Contents</div>
      <div class="tab-pane fade bg-light" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0">Home Tab Contents</div>
      <div class="tab-pane fade bg-light" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0">Services Tab Content</div>
    </div>
  </body>
  </html>

    • 這適用於基於 <ul> 的標記，或任何隨機的“自定義”標記。

    • 為了保持 <nav> 作為導航界標的原生角色，不要直接向其新增 role="tablist"。而是使用替代元素（例如基本的 <div>）並將 <nav> 包含在其中。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <nav>
      <div class="nav nav-tabs bg-warning" id="nav-tab" role="tablist">
        <button class="nav-link active" id="navTutTab" data-bs-toggle="tab" data-bs-target="#navTut" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Tutorialspoints</button>
        <button class="nav-link" id="navHomeTab" data-bs-toggle="tab" data-bs-target="#navHome" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Home</button>
        <button class="nav-link" id="navServicesTab" data-bs-toggle="tab" data-bs-target="#navServices" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Services-disabled</button>
      </div>
    </nav>
    <div class="tab-content bg-light" id="nav-tabContent">
      <div class="tab-pane fade show active" id="navTut" role="tabpanel" aria-labelledby="navTutTab" tabindex="0">Tutorialspoints Tab Content</div>
      <div class="tab-pane fade" id="navHome" role="tabpanel" aria-labelledby="navHomeTab" tabindex="0">Home Tab Content</div>
      <div class="tab-pane fade" id="navServices" role="tabpanel" aria-labelledby="navServicesTab" tabindex="0">Services Tab Content</div>
    </div>
  </body>
  </html>

    藥丸可以與選項卡外掛一起使用。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="nav nav-pills mb-3 bg-warning mt-2" id="pilltablist" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pillsTutTab" data-bs-toggle="pill" data-bs-target="#pillsTut" type="button" role="tab" aria-controls="pillsTut" aria-selected="true">Tutorialspoints</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pillsHomeTab" data-bs-toggle="pill" data-bs-target="#pillsHome" type="button" role="tab" aria-controls="pillsHome" aria-selected="false">Home</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="pillsServicesTab" data-bs-toggle="pill" data-bs-target="#pillsServices" type="button" role="tab" aria-controls="pillsServices" aria-selected="false" disabled>Services-disabled</button>
      </li>
    </ul>
    <div class="tab-content bg-light" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pillsTut" role="tabpanel" aria-labelledby="pillsTutTab" tabindex="0">Tutorialspoints Tab Contents</div>
      <div class="tab-pane fade" id="pillsHome" role="tabpanel" aria-labelledby="pillsHomeTab" tabindex="0">Home Tab Contents</div>
      <div class="tab-pane fade" id="pillsServices" role="tabpanel" aria-labelledby="pillsServicesTab" tabindex="0">Services Tab Contents</div>
    </div>
  </body>
  </html>

    對於垂直選項卡，建議在選項卡列表容器中包含 aria-orientation="vertical"。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="d-flex align-items-start mt-2">
      <div class="nav flex-column nav-pills me-3 bg-warning" id="vTabs" role="tablist" aria-orientation="vertical">
        <button class="nav-link active" id="verticalTutTab" data-bs-toggle="pill" data-bs-target="#vTut" type="button" role="tab" aria-controls="vTut" aria-selected="true">Tutorialspoints</button>
        <button class="nav-link" id="verticalHomeTab" data-bs-toggle="pill" data-bs-target="#vHome" type="button" role="tab" aria-controls="vHome" aria-selected="false">Home</button>
        <button class="nav-link" id="verticalServicesTab" data-bs-toggle="pill" data-bs-target="#vServices" type="button" role="tab" aria-controls="vServices" aria-selected="false" disabled>Services-disabled</button>
      </div>
      <div class="tab-content bg-light" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="vTut" role="tabpanel" aria-labelledby="verticalTutTab" tabindex="0">Tutorialspoints Tabs Contents</div>
        <div class="tab-pane fade" id="vHome" role="tabpanel" aria-labelledby="verticalHomeTab" tabindex="0">Home Tab Contents</div>
        <div class="tab-pane fade" id="vServices" role="tabpanel" aria-labelledby="verticalServicesTab" tabindex="0">Services Tab Contents</div>
      </div>
    </div>
  </body>
  </html>

    輔助功能

    • 使用 role="tablist"、role="tab"、role="tabpanel" 和 aria 屬性向輔助技術使用者顯示結構、功能和當前狀態。

    • 最佳實踐是使用 <button> 元素作為選項卡。這些控制元件會導致動態更改，而不是將使用者帶到另一個頁面。

    • 根據 ARIA 編寫實踐，只有活動選項卡才能獲得鍵盤焦點。JavaScript 在初始化時將 tabindex = "-1" 設定為非活動選項卡控制元件。

    為了改進鍵盤導航，建議使選項卡窗格可聚焦，除非它們內部的第一個有意義的元素已經可聚焦。JavaScript 外掛不處理此問題，因此您需要將 tabindex="0" 新增到您的選項卡窗格以使其可聚焦。
    選項卡的 JavaScript 外掛在具有下拉選單的選項卡式介面中效果不佳，因為存在可用性和輔助功能問題。下拉選單隱藏了活動選項卡的觸發元素，這會導致使用者感到困惑。

    使用資料屬性

    透過在具有 .nav-tabs 或 .nav-pills 屬性的元素上指定 data-bs-toggle="tab" 或 data-bs-toggle="pill" 來啟用選項卡或藥丸導航。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
  <ul class="nav nav-tabs bg-light" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tutorialspoints" type="button" role="tab" aria-controls="tutorialspoints" aria-selected="true">Tutorialspoints</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="services" aria-selected="false">Services</button>
    </li>
  </ul>
  <div class="tab-content bg-warning">
    <div class="tab-pane active" id="tutorialspoints" role="tabpanel" aria-labelledby="tutTab" tabindex="0">
      <h4>Tutorialspoints</h4>
      <p>Tutorialspoints Content</p>
    </div>
    <div class="tab-pane" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0">
    <h4>Home</h4>
      <p>Home Contents</p></div>
    <div class="tab-pane" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0">
      <h4>Services</h4>
      <p>Services Contents</p>
    </div>
  </div>
  </body>
  </html>

    透過 JavaScript

    使用 JavaScript 啟用可選項卡的選項卡（分別啟用每個選項卡）。

    示例

      const triggerTabList = document.querySelectorAll('#tabButton')
  triggerTabList.forEach(triggerEl => {
    const tabTrigger = new bootstrap.Tab(triggerEl)

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

    以多種方式啟用各個選項卡。

    示例

    const triggerElement = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerElement).show()    // Select tab by name

const triggerFirstTabElement = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabElement).show()   // Select first tab

    淡入淡出效果

    對每個.tab-pane 使用.fade 來使選項卡淡入。第一個選項卡面板必須使用.show 使初始內容可見。

    示例

    您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Navs and Tabs</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
  <ul class="nav nav-pills bg-light" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tut" type="button" role="tab" aria-controls="tutorialspoints" aria-selected="true">Tutorialspoints</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="services" aria-selected="false">Services</button>
    </li>
  </ul>

  <div class="tab-content bg-warning mt-2">
    <div class="tab-pane fade show active p-2" id="tut" role="tabpanel" aria-labelledby="tutTab" tabindex="0"><h4>Tutorialspoint</h4>Fade effect is used to fade the visible element.</div>
    <div class="tab-pane fade p-2" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0"><h4>Home</h4>Use .fade to each .tab-pane to make the tabs fade in.</div>
    <div class="tab-pane fade p-2" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0"><h4>Services</h4>The first tab pane must use .show to make the initial content visible.</div>
  </div>
  </body>
  </html>
    列印頁面
    上一頁
    下一頁
    廣告