Bootstrap 卡片與頁籤混雙

今天在幫一個舊系統升版到 VUE3 跟 Bootstrap5，舊系統是用 Bootstrap-Vue 與 Vue2 做整合，所以很多 HTML 結構要從 Bootstrap-Vue 拆出來，有些程式邏輯要另外寫。今天在拆一個卡片頁籤，發覺 Bootstrap 官方文件卡片頁籤只有結構，沒有可以切換的範例，所以我筆記一下頁籤卡片(nav-tabs + card)要如何做出可以切換的互動。

先看一下官方文件怎麼寫！

頁籤(nav-tabs)的部分：
https://bootstrap5.hexschool.com/docs/5.1/components/navs-tabs/

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

卡片導覽頁籤的部分：
https://bootstrap5.hexschool.com/docs/5.1/components/card/

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

基本上頁籤(tab) 要放在 card-header 中，切換的內容要放在 card-body 裡面。

可以參考以下兩張圖片，相同顏色的外框是要置換的部分：

黃色外框的部分則是必須修改或注意的地方:

nav-tabs 要放在 card-head:把<ul class="nav nav-tabs card-header-tabs" data-bs-tabs="tabs">放入 <div class="card-header">標籤之間，要注意不一樣的地方是新增了 data-bs-tabs="tabs" 這一句。
tab-content 就是 card-body：把 <div class="tab-content" > 的 class 加上 card-body。
tab-pane 的 id 要對應到 nav-link 的 id，方便查找。

改完可以互動的卡片頁籤：

<h2 class="mt-5"> Bootstrap 卡片頁籤</h2>
<div class="card">
  <div class="card-header">
    <h5 class="card-title">卡片標題放這裡</h5>
    <!--   頁籤   -->
    <ul class="nav nav-tabs card-header-tabs" data-bs-tabs="tabs">
      <li class="nav-item">
        <!--         <a class="nav-link active" aria-current="true" data-bs-toggle="tab" href="#tab1">Tab-1</a> -->
        <button class="nav-link active" id="1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button"
                role="tab" aria-controls="tab11111" aria-selected="true">tab-1</button>
      </li>

      <li class="nav-item">
        <button class="nav-link" id="2-tab" data-bs-toggle="tab" data-bs-target="#tab2" type="button" 
                role="tab" aria-controls="tab2" aria-selected="false">tab-2</button>
      </li>
    </ul>
  </div>
  <!--  內容  -->
  <div class="card-body tab-content">
    <div class="tab-pane active" id="tab1" role="tabpanel" aria-labelledby="home-tab">
      <p class="card-text">Tab-1 Content.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p class=" card-text">Tab-2 Content.</p>
    </div>
  </div>
</div>

範例程式碼：

改成直式膠囊範例程式碼：

參考資料：
https://stackoverflow.com/questions/69043604/bootstrap-5-card-with-tabs-and-content

Leave a ReplyCancel Reply