---
tags: Bootstrap5 實戰營
---

# Bootstrap5 實戰營第三週筆記

## 你要先知道的一些事

所有 aria 開頭的標籤都是給視障人士看的 視障人士使用播報軟體瀏覽網頁 在做無障礙網站時一定要加 另外也建議身為工程師要了解一下。

在 Bootstrap5 中使用 data-bs-* 來套入一些 JS 效果，所以基本上 data-bs 開頭的都是使用重點。

最常見的有兩個：
1. data-bs-toggle：套用的效果，值有 modal collapse tab 等。
2. data-bs-target：開啟的對象，通常值是 id 選擇器，也可用 class 選擇器。

在使用時會建議多嘗試、故意出錯，並使用右鍵的檢查功能，來查看 console 除錯。

## Modal 元件

先上[參考文檔](https://bootstrap5.hexschool.com/docs/5.0/components/modal/)。

基本上是一個按鈕加一個 modal 為一組，在按鈕身上加 data-bs-toggle="modal" 然後再加 data-bs-target="modal 的 id" 就可以開啟該 id 對應的 modal

要被開啟的 modal 對象須添加 class="modal"

想在一網站裡使用兩個不同的互動視窗(Modal)可以通過給按鈕與 modal 設置不同的 id 做到。

在按鈕身上添加 data-bs-dismiss="modal" 可以關閉 modal (可參考 modal 的 close 按鈕與右上角 x 按鈕)

取消點擊背景就關閉 modal 可以在 modal 身上添加 data-bs-backdrop="static" 來做到

這裡要注意：
設置取消點擊背景就關閉是將 class 添加在 .modal 元素上；
設置水平置中時是將 class 添加在 .modal-dialog 元素上。

## 折疊元件
先上[參考文檔](https://bootstrap5.hexschool.com/docs/5.0/components/collapse/)。

使用 a 標籤可以用 href 取代 data-bs-target 屬性 一樣是傳入要被開啟的 collapse 的 id

要被開啟的折疊對象須添加 class="collapse"

要一次操控多個折疊元件 可以使用 data-bs-target="要被操控的折疊對象的 class"

默認情況若想讓折疊元件是展開的 則須把折疊對象身上的樣式改成class="collapse show"

## nav&tab 元件
先上[參考文檔](https://bootstrap5.hexschool.com/docs/5.0/components/navs-tabs/)。

使用 nav 搭配 tab-content 就可以做出動態頁籤的效果， nav 與 tab-content tab-pane 缺一不可。

nav 是用來切換頁籤的， tab-content tab-pane 則讓頁籤默認隱藏，給他們加上 data-bs-toggle="tab" 與對應的 data-bs-target="tab-pane 的 id" 即可實現效果。

另外給 nav 的 a 標籤與對應的 tab-pane 標籤都加上 active 就可以修改默認顯示的對象。

每次點擊 nav 的 a 標籤就會動態添加與移除 active 屬性讓對應的頁籤顯示在畫面上。

## 通用類別：定位 Position
先上[參考文檔](https://bootstrap5.hexschool.com/docs/5.0/utilities/position/)。

想讓某個元素固定在另一個元素的特定位置，就使用position-relative 搭配 position-absolute，將 position-relative 放在父層身上當作基準點，將要固定在基準點身上特定位置的元素添加上 position-absolute 然後在該元素身上撰寫 top bottom left right 等樣式即可。
要注意的是 absolute 必須在 relative 的內層才有效果
結構應該是這樣：

<div class="position-relative">
  <div class="position-absolute">我是要被放在特定區塊的元素</div>
</div>

想在滾到超過位置時，將某元素固定在頭部，是使用 position-sticky ，它的特性是在還沒滾動超過自己的時候待在原地，滾動超過的時候跑到特定區域，效果僅限在該父層的區域中(超過父層會取消效果，回到原地)。

使用場合應該是這樣：

<div style="height:100px;background:orange"></div>
<div 
  style="height:100px;background:orangered"
  class="position-sticky top-0"
>
我是要滾動超過自己時就被固定在頭部的元素
</div>
<div style="height:1000px;background:red;"></div>

## 卡片元件
先上[參考文檔](https://bootstrap5.hexschool.com/docs/5.0/components/card/)。

在卡片中若是想讓元素對齊排列請將元素放置在 .card-body 中，圖片可通過 card-img-top 或 card-img-bottom 設置在卡片上方/下方。也可以通過使用 card-img 將圖片作為整個卡片的背景。

默認情況下卡片預設是垂直的 即排列由上至下
若想讓卡片為水平卡片 則通過在 card 中加上 row 格線系統來實現。

補充：卡片的圖片目前好像沒做自適應 可能要手動加上 img-fluid

在做多個卡片時，可參考文檔中的卡片群組，調整自己想要的排列方式。

## 通用類別：overflow
先上[參考文檔](https://bootstrap5.hexschool.com/docs/5.0/utilities/overflow/)。

當一個元素中的內容超過其本身的寬度或高度時，可以使用 overflow 來調整顯示狀態，
有以下幾種值：
1. auto：當內容超過高度時顯示垂直滾動條，當內容超過寬度出現水平滾動條。
2. scroll：不管有沒有超過寬高都出現滾動條，即僅管垂直方向並不需要滾動條也會顯示垂直滾動條。
3. hidden：直接隱藏所有超過範圍的內容。
4. visible：無條件顯示所有超過範圍的內容，並且不會出現滾動條，直接破版顯示在畫面上。

## 表單元件

校長表示：表單元件這邊同學自己看！
[參考文檔](https://bootstrap5.hexschool.com/docs/5.0/forms/overview/)

## 關於一些 Q&A

Q:為什麼又要綁 class 又要綁 id ，把它們全部弄在一起都用 class 命名不好嗎？
A:以網頁效能來說， class 允許多個相同的同時存在，所以程式會把整個 html 都找過一次，但 id 是唯一的，所以程式找到它之後就不會再往後找了，效率會比較好。

Q:像這種 modal 會影響到 SEO 的搜尋排列嗎？
A:還好，因為 modal 元素本身還存在頁面中，瀏覽器就搜得到文字。

Q:在美國上線的網站 沒做無障礙的話 會被罰錢？
A:對的 但台灣的話還好 只有政府的網站才會強制要加無障礙 民間網站比較沒差。

Q: tab 有四個頁籤，通常怎麼運作？
A:點擊到那個位置時，用 axios 重撈資料、重渲染。