---
tags: 網頁切版直播班
---
# 8/12(四) 每日任務(香水電商)

## 題目

練習 Bootstrap [網格系統](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)、 [元件](https://bootstrap5.hexschool.com/docs/5.0/components/accordion/)和 [通用類別](https://bootstrap5.hexschool.com/docs/5.0/utilities/borders/) 的組合，如圖：

左側切換「Home」時呈現的畫面
左側切換「Profile」時呈現的畫面
左側切換「Messages」時呈現的畫面

補充：左側欄切換是透過 Bootstrap JS 做到

提示：
* 左側欄佔 4，右側欄佔 8
* 每排呈現兩個卡片
* 卡片中的按鈕加上[工具類的樣式](https://bootstrap5.hexschool.com/docs/5.0/helpers/stretched-link/)後能夠讓整塊卡片都是可以點擊的狀態
* 不需載入 CSS Reset

HTML

<div class="...">
  <div class="...">
    <div class="...">
      <div class="list-group" id="list-tab" role="tablist">
        <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
        <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
        <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      </div>
    </div>
    <div class="...">
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
          <div class="row">
            <div class="...">
              <div class="card">
                <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/perfume-week6/product1.jpg?raw=true" class="card-img-top img-fluid">
                <div class="card-body">
                  <h5 class="card-title">Home</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary ...">Buy it!</a>
                </div>
              </div>
            </div>
            <div class="...">
              <div class="card">
                <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/perfume-week6/products8.jpg?raw=true" class="card-img-top">
                <div class="card-body">
                  <h5 class="card-title">Home</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary ...">Buy it!</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
          <div class="row">
            <div class="col-6">
              <div class="card">
                <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/perfume-week6/index9.jpg?raw=true" class="card-img-top">
                <div class="card-body">
                  <h5 class="card-title">Profile</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary ...">Buy it!</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/perfume-week6/products12.jpg?raw=true" class="card-img-top">
                <div class="card-body">
                  <h5 class="card-title">Profile</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary ...">Buy it!</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
          <div class="row">
            <div class="col-6">
              <div class="card">
                <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/perfume-week6/index3.png?raw=true" class="card-img-top">
                <div class="card-body">
                  <h5 class="card-title">Messages</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary ...">Buy it!</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/perfume-week6/index10.jpg?raw=true" class="card-img-top">
                <div class="card-body">
                  <h5 class="card-title">Messages</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary ...">Buy it!</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.card-img-top{
  max-height:200px;
  object-fit: cover;
}

需透過 Codepen 繳交
* 載入 Bootstrap CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css
* 載入 Bootstrap JS 及 jQuery：
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/Bingbingboom/pen/bGqaary)-->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/bGqaary
-->

<!-- 1.

-->