# T3-v1 code review
###### tags: `好想工作室`
2022.07.19（Tue.）（佳萱）

:::danger
待完成：
1. ~~輪播 -->點下面圖片，輪播可以跑到要播的圖片~~
2. ~~輪播圖上的黑框及字~~
3. ~~理解flex grid~~
:::

HTML：
1. 最後copy right那行應該放到footer裡面
2. 嘗試做出一個不分header__wrap及mobile__wrap的header
3. footer的ul可以換掉（例如說用div, section...）

CSS：
1. section__container--featured-garden的間隔要一致
2. banner下方menu的隔線做陰影
3. .container 下的text-align: center; 是否可移除
> 不用下在範圍那麼大的地方，需要再下
> 避免之後有些地方又要再蓋過
4. li的地方多下了一個list-style-position: inside;
5. flex-grow/shrink/basis(可參考mdn, yachen)
6. media query:
    * 可由小寫到大或大到小
    > 統一用min-width或統一用max-width
    * 可以寫在要修改的css下方
    （不用額外集中在某一區）
    （這樣之後要修改可以馬上找到，不用再往下看）

bootstrap：
1. 導覽列做中間，使用者不好使用
2. Carousel元件
3. Accordion元件 > 用於footer
4. featured__garden沒有下row

其他：
1. 用cdn可以看見bootstrap的class改了什麼
2. 結構排版 與 內容 應該分開來做（如同 書架 之於 書）
3. defer script

遇到的問題詢問：
1. Bootstrap有很多預設，要怎麼處理比較好？
2. 網路上多數是說由小切到大，但給的設計稿是大的，這樣一樣由小切到大嗎？
3. Bootstrap有很多版本，之後更新的話有很多要去變動
   那該怎麼寫比較好在日後做維護？

****

# <font color="#3881a1">HTML</font>
## 2. 嘗試做出一個不分header__wrap及mobile__wrap的header
[T3：把header兩種模式合併](https://hackmd.io/0EXmHNSWSDCDK48ZEJgGQg)

****

# <font color="#3881a1">CSS</font>
## 1. section__container--featured-garden間隔要一致

### 問題
原先的樣子，可以看到兩側綠邊較細，接下來的白邊變粗，圖片跟圖片之間的間隔又變細，間隔寬度都不一致：

### 解決想法
1. 原先使用了col，卻沒有使用row包住，雖然看起來RWD有成功，但那是因為在`section__container--featured-garden`下了inline-block，所以就誤打誤撞的讓他看起來很像成功了。

2. 所以把inline-block移除，再加上row，就會變成是正常使用到flex去做排版了。

3. 接著處理綠邊，發現綠邊是bootstrap中的.container預設有padding，如下圖：
所以先給一個new class叫做「.body__container」去蓋過原先的預設。（`.body__container`在css下padding左右大約20px）

4. 再來要處理的部份是裡面的，圖片與圖片之間的間隔，一開始想到的是用a+a再推margin-left，但因為原先已經讓他們佔滿12個col了，所以再加上margin就會跑版。

所以作法是把a加上padding，這樣是往內推不是往外推，就不會因為往外推造成超過12行網格而換行。（如下圖）


padding設為10px，這樣當兩塊`<a></a>`合體時，他們的間隔就會是20px（跟綠邊等寬）


5. 接著是處理最兩側的白邊，目前沒有相同的間隔（如下圖）
* 先把整個`section__container--featured-garden`這個div的左右兩側padding給減少到10px。
* 會發現問題只剩下那個h3標題沒有對齊，但不能直接對這個h3下margin或padding，所以要再加一個div，把h3包起來後，對div下padding: 0 10px;。

6. 間隔一致了！（都間隔20px）

只是在step5. 時把整個`section__container--featured-garden`這個div的左右兩側padding給減少到10px，所以連帶的`section__container--tips`要記得把padding左右兩側補回10px。

## 2. banner下方menu的隔線做陰影
> 參考資料：[Day8 如何設定 CSS 陰影效果呢？](https://ithelp.ithome.com.tw/articles/10204331)

## 5. flex-grow/shrink/basis(可參考mdn, yachen)
> 參考資料：[flex-grow MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow)
> 參考資料：[CSS 原理 - Flex(上) Yachen](https://yachen168.github.io/article/Flex.html)

把這個額外寫到另一篇筆記：[Bootstrap Grid System vs. Grid vs. flexbox](https://hackmd.io/@transferNoZ/H19bE246q)
****

# <font color="#3881a1">BootStrap</font>
## 1. 導覽列做中間，使用者不好使用
一般來說，導覽列都是做在左側或右側，因為即便是單手，也可以方便使用。但若是設計在中間，變成要像下圖一樣很不方便：

## 2. Carousel元件 > 用於輪播圖
> 參考資料： [Bootstrap Carousel](https://getbootstrap.com/docs/5.2/components/carousel/)

* ### Slides only
只能輪播，使用者不能去按

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

* ### With control
除了輪播外，使用者可以控制頁面輪播
原本的slide only那邊的程式碼外，再加上下方兩行`<button>`即可
`<button>`可以用`<a role="button">`替代

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

完整的程式碼如下：

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

## 3. Accordion元件 > 用於footer
> 參考資料：[Bootstrap Accordion](https://getbootstrap.com/docs/5.2/components/accordion/)
### 問題
大概知道怎麼使用它了，但是希望手風琴能只在mobile模式下出現，然後在desktop時仍可以保持原本的清單樣式，不過bootstrap似乎沒有提供這樣的語法。

### 解決過程
原本想說跟前面一樣用media query的方法，在html中分成mobile跟desktop模式，再利用media query在不同斷點下去隱藏。

不過發現了一個教學影片！
> 參考影片：[Bootstrap 4 Collapse Responsive Footer - web development](https://www.youtube.com/watch?v=X8IISClNNyc)
> 影片附上的Github：[bootstrap-4-collapsable-footer](https://github.com/frontendfunn/bootstrap-4-collapsable-footer/blob/master/index.html)

只是他是bootstrap4，所以語法不太相同，但主要就是看他的概念，他是運用bootstrap中的[display property](https://getbootstrap.com/docs/5.2/utilities/display/#how-it-works)

* 底下清單加上d-lg-flex：在large尺寸以上時，會變成flex排版
* h4 title部份分成兩組：
* 為button時：加上d-block d-lg-none d-xl-none
* 為div時：加上d-none d-lg-block d-xl-block
* 當尺寸在large以上時，手風琴的button會消失，一般的div的標題就會顯現
* 當尺寸在large以下時，手風琴的button會顯現，一般的div的標題就會消失

除此之外，排版上則與之前做法沒什麼差異，先在.accordion上下row，之後在.accordion-item上下col-lg-3以及col-md-12：
* 利用col-lg-3：使它在large尺寸時，可以四個排列在同一個
* 利用col-md-12：使它在middle尺寸時，可以自己佔滿一整個row

### 作法
1. 最外層accordion下row，裡面分四層accordion-item下兩種col：
* col-lg-3：
依照上表可得知，當螢幕大於等於992px時，就會讓每個accordion-item佔三格
* col-md-12：
同理，當螢幕尺寸大於等於768px時，就會讓每個accordion-item佔滿整條寬度
2. 但可以從上圖看見，當螢幕尺寸縮小，直到accordion-item佔滿整條寬度時，會發現這些手風琴是展開的
> 參考資料：[Bootstrap Accordion Accessibility](https://getbootstrap.com/docs/5.0/components/collapse/#accessibility)

     If the collapsible element is closed by default, 
     the attribute on the control element 
     should have a value of aria-expanded="false".

裡面有句話是這樣的，後來回去看程式碼，才注意到之前在aria-expanded的地方讓他變成true，所以才會造成每次手風琴都是打開的狀況。（只是改了好像也沒用）

後來繼續找，發現accordion展開後底下的清單，清單被一個div給包圍住，然後這個div有個class叫做show，於是把show移除，發現就不會再打開了。

覺得這個show有點眼熟，就又回去[bootstrap官方文件](https://getbootstrap.com/docs/5.0/components/collapse/#accessibility)看，發現他有提到一段話：

     If you’ve set the collapsible element 
     to be open by default using the show class,
     set aria-expanded="true" on the control instead. 

若要讓accordion手風琴預設為展開的話，除了要設置aria-expanded="true"之外，還要再使用show這個class。
所以全部刪乾淨後，這個accordion就會預設關起來了。

****

# <font color="#3881a1">Other</font>
## 1. 用cdn可以看見bootstrap的class改了什麼
原先cdn長這樣：

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

注意href裡面的就好：
`https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css`

然後把min去除變成以下樣子，就可以透過以下的連結，看到bootstrap對css做了哪些更改：
`https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.css`

（min是用來壓縮後給電腦看的）

:::info
JavaScript的cdn也是可以用相同作法，看到bootstrap對JavaScript做了什麼變更。

https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.js
:::

### 心得
不懂在幹麻的class，也不一定要去看官方文件，可以直接用上面網址去查詢，那個class做了什麼css的變化。（It's really useful!!!!!!!!!）

## 2. 「結構排版」與「內容」分開做
結構排版 與 內容 應該分開來做（如同 書架 之於 書）

看看哪邊「結構排版」與「內容」是沒有分開的
—> 意思是看是否有哪裡將內容抽出後，排版會跑掉的部份，就須要改掉

## 3. defer script
> 參考資料：[02. [HTML] script tag 加上 async & defer 的功能及差異？](https://ithelp.ithome.com.tw/articles/10216858)

****

# <font color="#3881a1">遇到的問題詢問</font>
## 1. Bootstrap預設
> Q：Bootstrap有很多預設，要怎麼處理比較好？

需要時再去做變更，另外加上一個class做變更
這是使用別人框架所要付出的成本

## 2. 小切到大/大切到小
> Q：網路上多數是說由小切到大，但給的設計稿是大的，這樣一樣由小切到大嗎？

其實都可以的

但如果是考慮到效能問題，小到大會比較好
因為從小的開始到大，東西是慢慢加上去的
但是大的到小的，變成要把大的（桌機內容）塞進小的，因此效能會變慢

## 3. 版本更新問題
> Q：Bootstrap有很多版本，之後更新的話有很多要去變動，那該怎麼寫比較好在日後做維護？

同第一個問題的答案，就是使用成本，只能到時再做更改