相對於 Bootstrap 4 來說,我認為 v5 真正發揮特色的地方在於 “變數”
雖然 Sass 可以透過簡短的語法產生大量的 CSS 程式碼,但這也意味著 CSS 檔案會不斷地擴增。因此許多設計概念在 v4 都受到了限制,例如:不同間距的 gutter(v4 只有三種,而這三種已經讓 Bootstrap 額外佔用許多容量)。
到了 v5 以後,除了原有的 Sass 之外,更靈活運用原生的 CSS 變數技巧,這些用法甚至會讓人感覺到「哇~原來變數可以這樣玩」。以格線系統來說,每次新增一種新的 gutter 僅需要增加 3 行 CSS(沒錯,包含 ClassName 就三行;至多不需要超過 5 行)
傳統的 CSS,至少要 60 行以上才能達到此效果,而 CSS 變數的 3 行影響到:
- 12 欄
- 5 種中斷點的欄線
- 外層 .row 的設計
更詳細的 CSS 變數知識
可參考此篇文章:https://wcc723.github.io/development/2021/09/22/css-variables-bootstrap/
「css 用法」的推薦目錄:
css 用法 在 軟體開發學習資訊分享 Facebook 的精選貼文
CSS -階層式樣式表( Cascading Style Sheets )的縮寫 – 是一種“程式語言”,用於將原始 HTML 頁面變為真正漂亮的網站。
本課程涵蓋了所有內容 – 我們從基礎知識開始(什麼是CSS?它是如何運作的?你如何使用它)? 並逐漸深入再深入。 我們通過展示實例以及背後的理論來做到這一點。
CSS 入門看起來很簡單,但實際上要完全了解 CSS 還蠻有深度的 – 於是本課程提供了不同的“軌道”或“入門點”,以準確地滿足你的需求並適應你當前的知識水準:
✅基礎知識:從零開始,從頭開始學習 CSS。 你從第一講開始,直到最後。
✅高級課程:你已經了解了 CSS 基礎知識,知道選擇器( selectors )是什麼以及它的工作原理,但希望深入了解並學習一些高級功能和用法。
✅專家新知:你也擁有先進的知識,但想深入了解 Flexbox、CSS Grid、CSS Variables 或Sass 等。 這一軌道適合你。
當然,這門課程提供了理論和實踐的例子 – 將在整個課程中建立一個完整的真實專案 – 但也有多個作業、測驗和挑戰,讓你練習在整個課程學習的個別概念。
https://softnshare.com/css-the-complete-guide-incl-flexbox-grid-sass/
css 用法 在 卡斯伯 Facebook 的最讚貼文
Border-radius 的延伸用法
除了圓形、橢圓形外
還有更特殊的不規則圓形喔 😆
css 用法 在 網頁前端工程入門:基礎CSS 教學By 彭彭 - YouTube 的推薦與評價
![影片讀取中](/images/youtube.png)
簡單的點綴一下網頁,基礎CSS 教學。更多教學內容請參考:http://training.pada-x.com/ ... <看更多>
css 用法 在 金魚都能懂網頁設計入門: 怎麼學CSS - 鐵人賽第七天 - YouTube 的推薦與評價
![影片讀取中](/images/youtube.png)
網頁設計#CSS教學#網頁教學#CSScoke網頁教學如此淺顯易懂,就是金魚都能懂的網頁設計入門啦 ... ... <看更多>
css 用法 在 圖解:CSS Flex 屬性一點也不難 - 卡斯伯Blog 的推薦與評價
前幾篇有介紹過CSS Grid Layout 的使用方法,當我們學習排版類型的CSS 時,最好的方式是先作分類,以Flex 與Grid Layout 來說都有共同的特徵, ... ... <看更多>