雖然這篇bootstrap間距鄉民發文沒有被收入到精華區:在bootstrap間距這個話題中,我們另外找到其它相關的精選爆讚文章
在 bootstrap間距產品中有3篇Facebook貼文,粉絲數超過5,012的網紅卡斯伯,也在其Facebook貼文中提到, 相對於 Bootstrap 4 來說,我認為 v5 真正發揮特色的地方在於 “變數” 雖然 Sass 可以透過簡短的語法產生大量的 CSS 程式碼,但這也意味著 CSS 檔案會不斷地擴增。因此許多設計概念在 v4 都受到了限制,例如:不同間距的 gutter(v4 只有三種,而這三種已經讓 Boo...
bootstrap間距 在 卡斯伯 Facebook 的最佳貼文
相對於 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/
bootstrap間距 在 卡斯伯 Facebook 的最讚貼文
Bootstrap 5 Beta 上線!!(距離正式版不遠惹)
現在官網 v4 文件也直接替換成 v5 Beta 的版本
近期導入的感想如下:
- 去除 jQuery,JS 導入的方式與過去差異很大
- 超棒的 grid 設計概念
- 更豐富的表單設計元件
- 更具有彈性的 utilities 變數設計
- 更多的 Utilities,許多元件不再有自己的間距、配色
(某方面來說,會顯得稍微不便)
已經升級為 beta1 的官方文件
https://getbootstrap.com/
Bootstrap 5 的格線設計原理
https://wcc723.github.io/development/2020/10/10/bootstrap-5-grid-whats-new/
另外,先前的 Bootstrap 4 文件
我們也會盡快更新至 Bootstrap 5 的版本喔~
bootstrap間距 在 卡斯伯 Facebook 的精選貼文
Bootstrap 5 的 Gutters 神概念,讓人想要脫離 BS4 啊~~
程式碼更短、變化更豐富,預設就包含數十種間距變化
詳見完整介紹:https://hex.school/oWbTF