WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-10. Navs 分頁標籤的設計

資料參考： Bootstrap說明網站(中) 、 w3schools(英) 、 RUNOOB(中)

複製導覽效果的頁籤面板的基本結構再加以修改

  <h1>商品推薦</h1>

<!-- 這個ul標籤結構負責的是上方切換內容的頁籤按鈕 -->
<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
  <!-- 一個li標籤代青一個頁籤按鈕的範圍 -->
  <li class="nav-item" role="presentation">
    <!-- 注意data-bs-target必須對應到下方要顯示內容的ID名稱 -->
    <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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" 
      type="button" role="tab" aria-controls="contact" aria-selected="false">精華系列</button>
  </li>
</ul>

<div class="tab-content" id="myTabContent">

  <!-- 一個tab-pane代表一個頁籤的內容，留意ID名稱不能重複 -->
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <div class="container">
      <div class="row" data-class="天然系列">
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p1_1.jpg" data-img="sec3p1_1b.jpg" alt="">天然蘆薈洗顏乳
        </div>
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p1_2.jpg" data-img="sec3p1_2b.jpg" alt="">天然蘆薈化妝水
        </div>
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p1_3.jpg" data-img="sec3p1_3b.jpg" alt="">天然蘆薈精華乳
        </div>
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p1_4.jpg" data-img="sec3p1_4b.jpg" alt="">天然蘆薈精華液
        </div>
      </div>
    </div>
  </div>

  <!-- 一個tab-pane代表一個頁籤的內容，留意ID名稱不能重複 -->
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <div class="container">
      <div class="row" data-class="保濕系列">
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p2_1.jpg" data-img="sec3p2_1b.jpg" alt="">自然保濕洗顏乳
        </div>
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p2_2.jpg" data-img="sec3p2_2b.jpg" alt="">自然保濕化妝水
        </div>
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p2_3.jpg" data-img="sec3p2_3b.jpg" alt="">自然保濕精華乳
        </div>
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p2_4.jpg" data-img="sec3p2_4b.jpg" alt="">自然保濕精華液
        </div>
      </div>
    </div>
  </div>

  <!-- 一個tab-pane代表一個頁籤的內容，留意ID名稱不能重複 -->
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <div class="container">
      <div class="row" data-class="精華系列">
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p3_1.jpg" data-img="sec3p3_1b.jpg" alt="">蒂莫絲精華眼霜
        </div>
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p3_2.jpg" data-img="sec3p3_2b.jpg" alt="">蒂莫絲特潤精華BB霜
        </div>
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p3_3.jpg" data-img="sec3p3_3b.jpg" alt="">蒂莫絲特潤精華修護液
        </div>
        <div class="col-12 col-sm-6 col-md-3">
          <img src="img/sec3p3_4.jpg" data-img="sec3p3_4b.jpg" alt="">蒂莫絲特潤精華修霜
        </div>
      </div>
    </div>
  </div>

</div>

試著調整成我們需要的部份 (以下參考使用, 不一定要相同的設定)

#sec3 .nav-tabs { 
  border-bottom: 1px solid transparent; 
}
#sec3 .nav-tabs .nav-link { 
  padding: 0.5rem 1rem; color: var(--c-gray2); 
  font-weight: bold; font-size: min( calc(15px + .15vw) , 18px); 
}
#sec3 .nav-tabs .nav-link:focus, 
#sec3 .nav-tabs .nav-link:hover {  
  border-color: transparent; color: var(--c-nav-10); 
}
#sec3 .nav-tabs .nav-item.show .nav-link, 
#sec3 .nav-tabs .nav-link.active {
  color: var(--c-nav-10); background-color: var(--c-assist2-01); border-color: transparent; 
}

 

 

go TOP