---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/16(五) 每日任務(香水電商)

## 題目

練習 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. 小羊
Codepen：
https://codepen.io/eqsmebaz-the-selector/pen/qBmrgov
-->

<!-- 2. 羿宣
Codepen：
https://codepen.io/Ann828/pen/VwbpgQJ?editors=1010
-->

<!-- 3. 小胖
Codepen: https://codepen.io/a1073315/pen/GRmWezy?editors=1100 -->

<!-- 4.蕭絜云
Codepen: https://codepen.io/cloudy_77/pen/RwVpOrM -->

<!-- 5.彥碩
Codepen: https://codepen.io/nelsonsu/pen/LYyWvOO?editors=1100 -->

<!-- 6.黃郁芳
Codepen: https://codepen.io/YuFang0323/pen/JjNWVvO -->

<!-- 7.黃彩雲
Codepen: https://codepen.io/corin19/pen/LYyWabV -->

<!-- 8.Steve
Codepen: https://codepen.io/steve5631/pen/rNmybVO
-->

<!-- 9.薰
Codepen: https://codepen.io/chiaoshin/pen/LYyWawW -->

<!-- 10. Jack
Codepen: https://codepen.io/JackChen89/pen/oNWZryz -->

<!-- 11. 莊承叡
Codepen： https://codepen.io/Ray_ty39/pen/LYyWwzO
-->

<!-- 12.Cloudia
Codepen: https://codepen.io/hkps87/pen/dyWvxNZ -->

<!-- 13. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/QWvpXwa?editors=1100
-->

<!-- 14. JT
Codepen: https://codepen.io/jsht-the-animator/pen/WNjpVqQ -->

<!-- 15. 劉子瑜
Codepen: https://codepen.io/superfish195/pen/GRmWVaL
-->

<!-- 16. 人中
Codepen: https://codepen.io/renchong2424/pen/ZEKKzxr
-->

<!-- 17. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/rNmmaPy
-->

<!--18. 小松
Codepen：https://codepen.io/120061203/pen/MWmmwym?editors=1010
-->

<!-- 19. Iris
Codepen: https://codepen.io/hungyen/pen/vYmmNXK
-->

<!--20.廖奕慈
Codepen:https://codepen.io/yiciLiao/pen/rNmmVvv?editors=1000 -->

<!-- 21.馮旻
Codepen:https://codepen.io/tboqkvhk/pen/GRmWaNK?editors=1000-->

<!-- 22.玉凌
Codepen:https://codepen.io/ruby376758123/pen/mdmWZNp -->

<!-- 23. 辰
Codepen:https://codepen.io/dnangelapril/pen/eYWWzmP
-->

<!-- 24. 德德
Codepen:https://codepen.io/Chiouder/pen/YzVVWwy
-->

<!--25. 劉永琦
Codepen:https://codepen.io/wjsvypvv-the-decoder/pen/yLbbJMx
-->

<!--26. 廖仕雅
Codepen: https://codepen.io/sophia0121/pen/ZEKKzKa
-->

<!--27. 陳方云
Codepen: https://codepen.io/ssnnny/pen/MWmmjyW
-->

<!--28. Genie
Codepen: https://codepen.io/hcliii/pen/bGWWBdN
-->

<!--29. 姚小芸
Codepen: https://codepen.io/crazzyamy/pen/VwbbarN -->

<!--30. 霈楹
Codepen: https://codepen.io/nrweahgl-the-selector/pen/YzVrRPJ -->

<!--32. 陳瑋崗
Codepen: https://codepen.io/weigang-chen/pen/NWjwYPQ?editors=1000 -->

<!--33. 陳書妤
Codepen: https://codepen.io/shuyu227/pen/bGWKYRY?editors=1000 -->