下一代 Bootstrap 的 5 個超酷特點

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

Bootstrap 4的初始版本於本週剛剛釋出，我希望大家都可以認識到，這是對這個流行的（可能是最流行的）響應式CSS框架一次重大的徹底整修。該專案創始人，Mark Otto說這次的釋出“幾乎涉及每一行程式碼”，這並不是在開玩笑。

1.更輕巧的檔案大小

有這樣一句話，“刪掉的程式碼必定是已經除錯過的程式碼，”——最好的重構一定會導致專案刪除大量程式碼，迅速瘦身。如果你下載初始版本，那麼你會發現，與最新的穩定版本Bootstrap 3（3.3.5）——約為123KB大小（bootstrap.min.css檔案）——相比，新的4.0.0初始bootstrap.min.css僅約為88KB。這可能是得益於IE8的支援。

2.從LESS切換到Sass

社群和效能是Bootstrap決定在版本4中作此切換的兩個主要原因。特別是，爭論的依據為：

• SaaS專案比LESS迭代更快
• 切換到Sass提高了框架的效能

然而，從GitHub的頁面來看，LESS看上去仍具有人氣的優勢，但Bootstrap表示，Sass增長的速度非常快。無論哪種方式，你都可以用正確的方法在Bootstrap 3中的Sass裡做很多CSS編碼工作。有些人在懷疑的是，PostCSS——一款極有前途的模組化工具，是否有強大的效能做預處理工作，以及是否應該替代LESS。

3.切換Flexbox支援

Bootstrap 4現在支援使用W3C的Flexbox功能，Flexbox功能依然可以消弭所有瀏覽器的支援。出於這個原因，這是一個可選功能，如果需要的話，可以開啟。

如果你需要快速複習Flexbox，那麼我給你推薦一個指南——《A Complete Guide to Flexbox》。還有新出來的關於Flexbox的一個視訊系列，如果你更喜歡這種方式的話。

4.重新調整卡片式UI佈局模式

我和Andrew Trice都認為這是一個早在2013年穀歌的Material Design中就應該理解的重要的UI佈局模式，現在Bootstrap 4將所有的籌碼都壓在了這一趨勢上。Bootstrap廢棄了wells、thumbnails和panels，轉而使用cards代替。

5.在ES6中重寫JS外掛

ECMAScript 6在幾個月前終於定稿和標準化，Bootstrap緊跟這一最新的web技術。他們已經重寫了所有的JavaScript外掛以便於利用ES6的優勢，並且他們也已經更新了一起的外掛，“UMD支援，通用的拆卸方法，選擇型別檢查，等等等等。”

好了！讓我們搶鮮來看看它的文件和長什麼樣子吧！