Search
相對於 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/
在 Ray Xu 及助教團的幫忙下
六角的 Bootstrap 5 中文版翻譯完成！
也透過翻譯及提早引入實戰
Ray 也幫大家把 v5 及 v4 版本的主要差異通通列出來
如果你是使用 v4，想知道如何快速轉 v5，看這份準沒錯
重點摘要：
- 捨棄 IE，jQuery 掰掰
- right, left 消失！通通改用 start, end
- data 屬性的調整，一律補上 data-bs-*
- 新增中斷點，尺碼比衣服還多樣
- 表單、格線多樣化
文章連結：
https://hsiangfeng.github.io/css/20210205/1934188738/
在进行响应式网页开发时，利用@media screen设置屏幕断点是十分常用的做法： @media screen and (max-width: 768px) { /* your style */ } @media ... ... <看更多>
Tailwind 教學(5) - 不只加 斷點 ，所有utility CSS 都幫你傳便便. 1.7K views 2 years ago. 六角學院Hexschool. 六角學院Hexschool. 29.1K subscribers. ... <看更多>
斷點css 在 [CSS學習筆記] CSS Media Queries 基礎使用 - 1010Code 的推薦與評價
通常我們在寫RWD 網頁，解析度由大寫到小，也就是說CSS 從PC 開始寫到小型設備(手機)，後續用media + max-width 做斷點。以下範例建立一個雙欄的排版， ... ... <看更多>