本站的主題是商業，創業，美食，葡萄酒，閱讀，網路科技。
這是我的 FB粉專 以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~
圖片來源 https://laravel-news.com/bootstrap-4-laravel-preset
https://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/
Bootstrap 4 beta 在日前發佈了，以下是 v4 的主要更新。如果是同為開發者的朋友，可以想想為什麼 Bootstrap 4 要採納這些更動，有什麼技術是值得我們進一步去研讀的。
Moved from Less to Sass
前端的朋友應該知道，bootstrap 3.x 版是用 less, css相關檔案也都是 .less 檔. Bootstrap v4 開始用 Sass (正確來說應該是 Scss), css相關檔案變成是 .scss 檔。
Flexbox and an improved grid system
官方文件提到
“We've moved nearly everything to flexbox.”
Bootstrap v4 幾乎所有排版都是用 css flexbox 的方式。另外，新增一個 grid system 的範圍: xl. 寫法上也要注意，3.x 版是
.col-xs- .col-sm- .col-md- .col-lg-v4 是
.col .col-sm- .col-md- .col-lg- .col-xl-注意 xs 不用再寫了，多了 xl。3.x 版是 3 個 breakpoint，v4 是 4 個 breakpoint。
Dropped wells, thumbnails, and panels for cards.
拿掉 3.x 版的 wells, thumbnails. 新增 class=”card”, 以符合市面上極為大量的卡牌系統網頁。
Forked Normalize.css and consolidated all our HTML resets into a new CSS module, Reboot.
作者有給原因 https://github.com/twbs/bootstrap/issues/21740
v4 reset browser 的工作現在會放在一支 _reboot.scss 裡。
Brand new customization options
3.x 版做 customize 通常是再加 css 檔案。v4 開始官網建議直接去改 Sass 變數，然後重新 compile.
Dropped IE8 and IE9 support, dropped older browser versions, and moved to rem units for component sizing.
可以簡單看一下 v4 grid 裡的 padding, font size, 全改為 rem 了。
結論
以上是 Bootstrap 4 的主要更新，如果是同為開發者的朋友，可以想想為什麼 Bootstrap 4 要採納這些更動，有什麼技術是值得進一步去研讀的。
延伸閱讀
本站的主題是商業，創業，美食，葡萄酒，閱讀，網路科技。
