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

# Bootstrap5 實戰營第五週筆記

今天的直播課程內容主要說明做一個版型時
通常會遇到哪些狀況 以及要如何設計與調整

## 針對設計稿給出的幾個建議

### h1 標籤的位置處理

首先一個網頁通常一定會有一個 h1 並且只會有一個 h1
在最終設計稿這種募資網站最好把 h1 下在主要募資產品的標題中
然後如果是普通的網站通常會建議下在 LOGO 身上

### 關於 LOGO 的常見錯誤

有些同學寫 h1 裡面包 a 連結 裡面是 LOGO 圖片
然後也有同學寫 a 連結裡面包 h1 裡面是 LOGO 圖片
這邊統一說一下 是 h1 裡面下 a 連結 在下 LOGO 圖片 才是正確的寫法 這部分要再注意一下。

### HTML tag 的幾個重要使用建議

首先最上面的 navbar 關於 挖寶 那邊請不要用 div 做 應該要用 `ul>li*3` 下去設計

然後大圖左邊的價格請不要為了字體大小設成 h2
價格的大小 需要時可以設 class="fs-2" or class="h2"

這裡也順便補充一下校長批改作業的重點內容：
首先會看 HTML 標籤的使用時幾
全部都用 div 做的一定沒星星
要在正確時機下正確的標籤(EX: 相同架構使用 ul>li，段落使用 p， h1~h6 的設計是否正確等)

然後會看 class 的語意以及 HTML 整體的結構與 CSS 的結構
上述如果都做的不錯就會有半顆星 非常不錯則能拿到一顆星

兩顆星會看 SCSS 設計， HTML 標籤語意， CSS 命名，自訂的 class 是否符合設計模式(EX: OOCSS 設計模式、util、components 等)

三顆星基本上是校長找不到問題點，或是寫得比校長自己寫的更好～～

目前校長只給過學生最高兩顆半星 以上給大家參考。

## 針對設計稿的標籤設計

在專案內容中 施了魔法那個文章標題 建議使用 h3~h5
然後文章內容不要用 div 標籤 應該使用 p 標籤為佳

表單的部分請用 label 跟 input 標籤做
另外要記得設 for 跟 id 才能點擊 label 時 focus 到對應的 input 身上
表單按鈕的部分同學想使用 `button type="submit"` 或是 a 標籤都可以

然後右邊贊助專案的卡片標題 買一送一 那段建議用 h2 或 h3 要文字大小為 20px 就用 class="h5" 來設定即可 請勿直接給他設 h5 標籤
它下方的價格 1600 也不要用 h1~h6 標籤來做 基本上所有價格都不會用 h1~h6 標籤設計
贊助專案卡片標題下面結構會是 span 標籤跟 p 段落跟 a 或 button

問答區塊也要用 ul>li 寫 這裏不要用 card 元件 應該用手風琴效果為佳 然後改一下 他原本都是 div 所以要改成 ul>il 的結構
這邊會建議問題名稱寫 h3 答案部分用 p 標籤

目前進度也是用 ul>li 寫 裡面是卡片元件 + 格線系統
標題建議用 h3~h4 MORE 的部分通常會設計可以點擊進去觀看 所以要用 a 標籤

留言的部分也是用 ul>li 寫
裡面的姓名其實用標題有點怪 但這邊可能就還是建議設 h3 或 h4

缺錢事務所那個區塊是告知哪個發起方案 用 div 做就好 不需要跟下面卡片一起做成 ul>li
但下面募資方案的卡片要做成 ul>li 的結構會比較好

如果全部都設 div 標籤會找不到網站的邏輯性
爬蟲不知道哪個比較重要 所以請不要這樣做
建議要做到是讓後端很好套用的結構

回頭來講一下最上方左邊那塊雜七雜八有進度條的部分：
首先目標那行應該會是 span 標籤
然後下方很大字的價格可能會用 p 標籤 請不要為了字體大小給他 h2 標籤
再來是進度條就 div 標籤
往下募資人數募資倒數也都用 p
再下去的四個小 icon 這邊就要用 ul>li 做了
然後是左邊黃線的區塊直接用 div 標籤
三個按鈕就 a or button

## 關於 inline style
**不要用 inline style 寫樣式(即在標籤身上寫 style="xxx:xxx;" 這種)**
寫 style 會造成樣式的沿用性、彈性不高 所以建議包裝成 class

就算是想要讓代碼乾淨一點 也還是建議不要直接寫 style 污染 HTML 標籤
這種習慣是毒藥 什麼都習慣寫 style 不寫 class 這樣設計出來的東西就很沒結構、沒架構，代碼也不漂亮、不優雅

## 格線系統的注意點
舉例來說，你給某個區塊元素設置 col-sm-12 col-lg-7
這部分可以不要寫 col-sm-12 預設就會滿版 寫一種(col-lg-7)就可以了
因為 BS5 的設計本身就是從手機版優先

## 其他小細節

### 神奇數字

校長在批改的過程中經常看到如 .w-63 .fs-12 這種樣式名稱
通常會設計一個基礎單位(ex: 8px) 然後用一到五倍去設計樣式名稱 比如 .m-2 就是 16px ， .m-3 就是 24px 這樣子
所以建議不要直接寫值當 class 名稱 應該是使用倍數等級尺寸等等來設計會更好
不然這樣的寫法顯得很沒規則 並不會有比較聰明的感覺 這部分再請留意 寫這樣是不大好的 請用 m-1~m-5 or m-sm m-md m-lg m-xl 等來設定

### 消失的 h3

有些人在設計標題寫著寫著寫完了 然後老師批改時就發現 摁很棒有 h1
很棒 也有 h2 然後就.....嗯？怎麼找不到 h3 ？ 嗯？？怎麼會有 h4
大概4這樣～ 所以呢在使用標題標籤(h1~h6)時 再注意一下這個小小細節
寫完的時候檢查一下是否有問題 不要中間突然跳過了某個數字直接寫下一個 這樣就很不好

### 關於文字段落的部分

一定要用 p 標籤去寫段落文字是因為在業界會被幹剿
不要什麼都用 div 啦是多愛 div ？？？
偷說 前端工程師最討厭 div 在動態生成數據的時候會搞不懂何時要用迴圈啊 好嗎 勸你們善良！！

### 格線系統的 margin

不要直接在 .col-* 身上設置左右 margin 謝謝！
這個母湯 會破壞 row 的結構 需要推間隔應該是在 row 身上下 g-* 設置 gutter 才是正解！這邊留意一下～

你問我為什麼會破壞？同學請回去複習格線系統再來做作業謝謝！(打爆你哦！)

## 針對個人的小建議(這部分也歡迎大家取用 你的問題跟我的問題說不定一樣啊)

1. 最上方的標題(拍出會動的照片那段) 可以直接用 h1 包住 不需要跟下方圖片那些一起包在格線系統中

2. 工具提示那四個小 icon 不需要設 .col-6 那邊可以直接不用格線系統 如果用格線也不該是 .col-6 應該是直接滿版

3. 買一送一跟專案內容的文章標題交換權重 買一送一 h2 ，文章標題 h3

4. 下方表單區塊應使用 label for 配 input id ，這樣在表單上使用者體驗會較好

最後附上 [CSS 優化文章連結](https://ithelp.ithome.com.tw/articles/10237687) 以上就結束囉！

## 直播中的一些問與答

Q: 請問 class 使用 fs-1~fs-6 跟 h2~h6 的時機在哪裡呀？
A: 通常 fs 可以客製化修改大小 所以會比較建議先用 h2~h6 其他客製化再用 fs

Q:想請問使用 ul 但去掉 list-style 留下來的左邊留白要怎麼去除呢？ Boostrap 的 ul>li 有預設樣式，用來排版如何處理最佳？
A: Bootstrap5 有一個樣式叫 `list-unstyled` 可以刪掉多餘空白與列表序號的部分

Q: 關於自訂的 class 、因為 BS5 的 class 文字間使用 - 區隔，那自訂的能使用 _ 做文字區隔嗎？還是不見 - ？
A: 沒正確答案 但要有一致性 想一看就知道是自訂的可以用 BEM 命名法 或使用下底線與 BS5 做區隔性

Q: 老師 H1 拿去寫產品大標了那 logo 部分是用 H2 嗎？
A: 不用給 LOGO 設標題了 除非這是普通首頁 募資的話設在募資品標題上比較好

Q: 為什麼目前進度是用 li
A: 有三則消息 代表他們是相同群組的東西(都是消息) 當東西有群組性質就用 li ，這邊用 div 母湯，不過除了 li 也可以用 article 標籤。解釋一下：因為爬蟲看到寫 div 表示這是新東西 兩個東西都 div 表示兩者之間都沒關聯 簡而言之用 div 的表示我們大家都沒關係～但用 li 把它們綁在一起 就一目瞭然這是一個群組 所以有主題性的列表通常都會使用 li 。這部分使用時可以思考一下這些是否是相同性質的東西，是的話就可以用 ul>li 做

Q: 常見的距離才設定 class 嗎？ 其他直接寫死在特定的 CSS？
A: 假設那尺寸只有一個地方有 而且超難計算完全不是預設值的倍數，在這種情況就不得不寫死在該元素的 class 上了

Q: 想知道 article 和 section 使用的時機?
A: 當有超多 ul>li 的時候 看哪個最重要就給那個設成 article>section 來取代 ul>li ，順便補充 section 裡面通常都用標題標籤(ex: h3)