Bootstrap 4 主要更新：Grid System、CSS

商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。
從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。
FB粉專 Larry的午茶時光歡迎大家追蹤~

圖片來源 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 要採納這些更動，有什麼技術是值得進一步去研讀的。