---
tags: 21 天帶您做出 Bootstrap 5 募資網站
---
# BS每日任務 紀錄
## 每日任務
### 05/18 每日任務
box：預設會將padding和border寬度算進去，width:60px + padding-left:10px + border-right:3px =63px
box2:有加上box-sizing:border-box屬性，padding和border的值會從width設定值內扣，width則維持設定值，因此box2=40px

### [05/20 每日任務-list group+網格系統](https://codepen.io/tinchen/pen/bGqWrZM)
###### 花費時間約50m 相信第一直覺
原來是想太多，以為要把上面的listgroup和下面圖片拆成兩個row
後來參考同學的，就很簡單的加上col-md-3 col-lg-2和外圍row加上justify-content-center就可以了!

### [05/21 每日任務-製作部落格頁面](https://codepen.io/tinchen/pen/PopjzqV)
###### 花費時間約1h30m
看到題目以為是填空的方式，線上課程很容易一個人想破頭啊，直播課真的是意外的效率比較好，有很多同學陪你，學習不孤單不卡關，不需侷限在框裡，不熟悉就是要多產出多練習，參考同學的答案就立馬能解出來，然後當然不能只是照抄或複製貼上，要去bs文件找關鍵字，習慣看文件找資源

### [05/24 每日任務-網格系統](https://hackmd.io/Kc9SB8bvRpiusoZOZYRU8g?view)
###### 花費時間約50m
第二題 題目 請做出一個在 PC 版中佔據兩欄 平板中佔三欄 手機版中佔四欄 的區塊。
個人覺得應該是下面這樣，同學們答案跟我不太一樣，是理解錯誤?!

<div class="container">
    <div class="row">
        <div class="col-3 col-md-4 col-lg-6">col</div>
        <div class="col-3 col-md-4 col-lg-6">col</div>
        <div class="col-3 col-md-4 col-lg-6">col</div> 
        <div class="col-3 col-md-4 col-lg-6">col</div>        
    </div>
</div>

### [05/26 每日任務-position](https://codepen.io/tinchen/pen/wvJqxdO)
###### 花費時間約30m
第三題 地位在position-sticky top-0 低級錯誤 效果出不來 找一會才發現打錯字 哈

### [05/27 每日任務-modal](https://codepen.io/tinchen/pen/XWMaPXz)
###### 花費時間約1h
Modal 預設是500px 另有modal-sm modal-mg modal-xl，使用d-grid gap-2將按鈕佔滿整個寬 或用button w-100，用進度條偽裝成線框，再用一個div背景白色，定位在進度條中間，將文字加多行一點就可以看出來，這方法僅適用一行!

解每日任務的重點放在多加練習熟悉文件為主，不花太多時間在糾結，bs5用法有些還是和bs4不一樣，雖然說概念沒變，但是l和ｒ變成ｓ和ｅ是有點難理解哈，bs4用btn-block比較好懂，d-grid gap-1這好像是新增的到底是...
###### 感謝WangShuan同學提供參考

### [05/28 每日任務](https://codepen.io/tinchen/pen/JjWrXVG)
###### 花費時間約應該有2h 包含寫文時間
bs文件的nav-tabs大部分是使用button當範例，內容有些不太確定如何使用，測試效果也不明顯，例如外層id="myTab" role="tablist" <a> 標籤裡的 role="tab" 和tab-content裡面的role="tabpanel"。
參考同學範例解答，主要是加上nab-tabs和tab-content、tab-pane fade 就可以達成tab切換效果。
aria屬性是提供無障礙網頁使用

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

一開始在想怎麼寫時，寫成同頁面定點切換，想說不對耶是在哈囉 哈

<div class="container">
  <div class="row justify-content-center">
    <div class="col-auto">
      <ul class="nav nav-tabs bg-dark">
        <li class="nav-item">
          <a class="nav-link link-secondary" href="#home">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-secondary" href="#about">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-secondary active" href="#album">ALBUM</a>
        </li>
      </ul>
      <div>
        <div id="home">
          <img src="https://fakeimg.pl/800x300/?text=home"/>
        </div>
        <div id="about">
          <img src="https://fakeimg.pl/800x300/?text=about"/>
        </div>
        <div id="album">
          <img src="https://fakeimg.pl/800x300/?text=album"/>
        </div>
      </div>
    </div>
  </div>
 </div>

## 主線任務
### [第一堂主線任務LV1](https://codepen.io/tinchen/pen/XWMevpg)
很多東西忘了或不熟悉，所以又回頭做第一堂LV1，上面寫要做三遍，這是第一回合哈! 可能寫個第二遍就可以順便交程式體驗營的任務，css和flex真的要很熟才能縮短時間，這一頁都花了我三個小時有，更何況是一整個網站，繼續練就對了!!

### [第一堂主線任務LV3]()
今天弄了快五小時(5/30)....結果card裡面的元件一直排不好....先來弄別的....
做一個網頁之前是不是要先弄架構在改細節...

## 最終任務
### [05/31 每日任務](https://codepen.io/tinchen/pen/VwpMOeZ)
###### 花費時間約應該有3h+3h(2:30-5:40每日任務+8:00-11:00第一堂LV1)
bs最終作業設計成每日任務，這樣比較好完成一個網頁，沒想到最終任務的一小塊區域花了我那麼多時間，如果沒有"[範例小抄網站](https://ecjia.com.tw/demo/bs5homework/#)"和"[最終設計稿筆記](https://hackmd.io/PboDQ9ZZSvy8IuGemyw35Q)"我大概也會卡超久，雖說要一邊紀錄，但光寫code都很花時間了....
* 在bs5mr-auto已改成me-auto

<!--2021-06-02-->