ASong
[網頁設計技能樹] 切版前端:Bootstrap5 使用常見錯誤

在上 21 天帶您做出 Bootstrap 5 募資網站 時老師批改作業時的整理,算是一些比較細節的處理非絕對標準,要實際寫的時候會比較有感覺,先整理起來。


一、Scss 分類

  • component
    • 可以多一個 components 資料夾,放 _btn.scss,將 // change hover // change accordion 放進去
    • _navbar 才算是 components
  • page
    • 如果有無法分類的部分,建議建立 pages 資料夾,來放 _news.scss
    • .custom-icons 假使無法分類,也有比較客製化的部分,那就建立一個 pages 資料夾,然後多一頁 _fundraising.scss 來放置
    • layout
    • Layout 是共通版型,index.scss 應放在 pages 資料夾,不建議放在 Layout
    • footer.scss、content.scss 不算 components 元件,那些算是 layout
  • base
    • _utilities.scss 裡面的 body,body 這個標籤不會放在 utilities,他比較像是全站樣式,可以放在像是 global.scss、base.scss 等等
  • utils
  • 其他
    • index.scss 客製化嘗試得不錯,這裡面還可以拆得更好一些,因為有些項目不是只有 index 才有。像是 .btn-primary 是每個頁面都有,建議可以多一個像是 _custom.scss 來進行擴充,不要都寫在 index.scss
    • SCSS 結構,讓 layout 可以在一塊
    • bootstrap 內建就已經有 border-box,所以這裡可以不用再寫一次

二、自訂/擴充變數

  • 變數命名
    • 不建議叫做 custom__btn-secondary,因為 custom 這個詞彙比較抽象,若是以元件設計概念來說,應是擴充 btn-secondary 的樣式,例如 .btn-secondary–hoverPrimary
    • 建議不要叫做 .custom-icons、.card-icon,.custom-icons 會無法理解釋放在哪個區塊,像是 .card-icon 可以用 util 來擴充,在 HTML 標籤加上 util class,例如 w30、h30、l-1。
    • 請不要用編號式命名,例如 .btn-hover2:hover,假如 .btn-info,在 hover 會變成主色,那可以寫成類似 .btn-info–hoverPirmary
    • 像是這樣的 class .text-dark-2,若是由淺入深的顏色級距,建議用 100~900,像是 tailwind 與 Bootstrap 也是如此
    • .ff-bt2 的 .ff 縮寫比較難理解是 font-family 的縮寫,是我的話會寫成 .font-BalooTamma2
    • .py-6px 建議以 1~5 的單位級距來設計,不要寫死,例如一個單位為 6px,那就是 .py-1,兩個單位推擠 12px,那就是 .py-2
    • .fs-14建議用成級距,例如 1 個單位是 8 的倍數,fs-2 則是 font-size: 16px,也建議可修改 bootstrap 變數
    • 單位設計不要出現類似 .width-63、.font-12,以一個單位或等級來設計,例如 font-xl、mb-5
  • 變數擴充
    • myarticle 的 class 比較難以聯想為調整行距,若是只有單純行距,可以嘗試用擴充通用類別的 class 來設計,例如 .lh-1、2、3 設定行距單位來擴充。其它 class 細節也可想一下可以如何調整
    • footer 可以嘗試運用 BS 變數來設計,這樣或許連 footer 裡面的 code 也不必寫,畢竟只是顏色,但顏色也能善用 BS color theme 變數來擴充
    • tomato 變數 建議擴充在 Bootstrap color theme
    • 嘗試客製化 class 蠻好的,例如 $border-radius,但也可嘗試運用 BS5 所提供的變數來嘗試做擴充
    • .gray 可嘗試透過 bootstrap 顏色變數擴充
    • 以通用類別概念來說,.btn-fz,若是單純調整字體大小,可以針對 font-size 客製化樣式,例如 font-xl,或是用 BS 內建的字體大小
    • 在 style.sass 有看到 .card .text-muted,card 是元件,text-muted 是通用類別,兩者是不一樣的東西,若只是單純 font-weight: 400,應是擴充 font-weight 的 class 通用類別,例如,.fontBold-400,其它細節也可嘗試思考
    • . p-l-64 下次可嘗試用 SCSS 客製化變數來擴充
    • .fs-sm、.fs-5 可嘗試用 BS5 內建樣式擴充,或者是自訂 _util.scss 來額外新增
  • 其他

三、格線系統

  • 不要在 .col 的 HTML 標籤用到 margin 左右推擠
  • col-12 col-lg-6 px-3 ps-md-0 pe-md-2 mb-3,格線系統的地方,請不要調整 padding 與 margin 的左右邊
  • 在 .col 上面,請不要更動左右的 margin 與 padding
  • 像 class col-12 col-lg-5,可以改為只寫 col-lg-5,移除 col-12,因為預設不滿足 lg 時,他會自動滿版
  • 有寫到這樣的 col-12 col-lg-6 可以直接改為 col-lg-6 就好,不需要加上 12
  • 如果是滿版設計,不需要增加 .row> .col-12,皆可移除,讓他是單純 h2 標籤,不用加上格線系統

四、細節處理

  • logo
    • logo 部分不要寫死 width 在上面,還請寫在 css class 上,這樣在斷點設計上,要讓他變大變小會比較好調整
    • img logo 留意如果手機與 PC size 不一樣,設定寬高寫在 CSS 上,彈性變動會比較好設定些
    • logo 部分不會是包在 li 裡面,他與選單會拆開
    • logo 請加上 a 連結,通常 logo 都有回首頁的功能
  • input
    • 登入裡面的帳號密碼,要對應 label、focus,點擊文字時,會 focus 到對應 input
    • label、for 的 focus 要對應好
  • 其他
    • 會是 h1 包 a ,而不會是 a 包 h1
    • 請寫在 class 來增加樣式,不要寫死 inline style ,擴充彈性會變低
    • 右側的 index-programs ,可以設計成 overflow-y:auto 讓他能夠上下滾動
    • .text-justify 裡面請不要加上 line-height:32px,還請透過其它行距 class 來設定
    • 不要過度濫用 div,利用 ul、li 或 article 與 section

作者介紹 - ASong

ASong

ASong, 現在是一位前端工程師;業餘的閱讀愛好者、講師、寫作者;任何討論或合作可寄送至 dragoncres@gmail.com。

發表迴響