本文翻譯自 Boostrap 開發團隊官方部落格。
經過兩年的開發,我們終於釋出了第一個 beta 版本的 Bootstrap 4。在此之間,我們一共把程式碼徹徹底底搞砸了至少 27 次,提交了將近 5,000 個 commit,修改了 650+ 個檔案,新增了 67,000 行程式碼,又刪除了 82,000 行程式碼。我們釋出了 6 個 alpha 版本,三個官方主題甚至還有一個招聘版…… 終於是時候釋出 beta 版本了。
Beta!?
長話短說,釋出一個 beta 版本意味著我們在第 5 版之前不會再搞出超多的 bug 了。我們都不是完美的,但是我們也盡全力保證每一個類、功能和文件 URL 都不會再被移除或者改變。也就是說,可能會加功能,但是不會刪功能了。
對於沒用過 alpha 版本的同學們,這些是 v4 中值得注意的一些亮點:
- 從 Less 切換到 Sass。感謝 Libsass 框架和強大的 Sass 開發者社群,Boostrap 現在的編譯速度比以前都要快。
- Flexbox 和更加完善的網格系統。我們幾乎把所有東西都挪到了 flexbox 裡,新增了一個更適合移動裝置的網格等級,並且徹底重構了我們的源 Sass,使用了更優秀的變數、mixins 以及 maps。
- 放棄了 wells, thumbnails, 和 panels。卡片是 Bootstrap 一個全新的組成部分,它們能夠完成前三者的任務,而且能做得更好。
- Fork 了 Normalize.css 並且將所有的 HTML resets 合併進一個全新的 CSS 模組,Reboot。Normalize.css 目前的開發走向了我們沒有預料到的方向,刪除了一些我們長期以來依賴的核心 CSS 部件。Reboot 使用了 Normalize.css 的核心組成,並將其擴張從而包含更多的 resets,比如
box-sizing: border-box
,以及邊緣部件,全部放在一個 Sass 檔案中。 - 新增了新的自定義選項。在 v3 中我們讓開發者可以選擇需要的漸變、過渡、陰影、網格等。在 v4 中,我們把這些選項全部放在了 Sass 變數中。想使用預設過渡樣式並且禁用圓角圖示?修改一下變數重新編譯即可。
- 取消了對 IE8 和 IE9 以及其它高瀏覽器版本的支援,並且使用新的 CSS 特性。除了網格系統之外,我們用 rem 和 em 替代了畫素單位,從而使自適應字型和組成部分更加容易調節。如果你需要 IE8/IE9、Safari 8 以下版本、iOS 8 以下版本的支援,請移步 Bootstrap 3。
- 重寫了所有 JS 外掛。用 ES6 重寫了所有外掛從而支援最新的 JS 改進(包括新的 teardown, option type checking 等 method)。
- 利用 Popper.js 庫提高了工具框、彈窗和下拉選單的自動調節位置特性。
- 重新設計並改進了文件。重新設計,用 Markdown 重寫,並且加了一些好用的外掛來流水線生成示例和程式碼 snippets,讓開發者更容易地使用我們的文件。我們也同時新增了一個新的超棒的搜尋框。
- 新的 build 工具全部用 npm 指令碼重寫,棄用 Grunt,讓 Bootstrap 專案的開發者們更加容易地為專案進行貢獻。
- 還有更多!自定義表格控制,重新設計的走馬燈,重構的導航欄,新部件,還有更多更多……
想了解更多新功能?繼續閱讀,或者直接去看文件吧!
新外觀
我們已經在 Bootstrap 4 的 alpha 版本中更新了一些外觀,但是最近我們為文件頁面也更新了樣式。
除了新的調色盤和系統字型,文件也有了新的佈局。我們還使用了超強的 Algolia 的 DocSearch 搜尋功能、固定的導航欄和邊欄以及一個全新的目錄。
更多關於 beta 版本的細節,可以參考如下連結:
譯者注:原文來自 Boostrap 開發團隊官方部落格。詳情請見 Bootstrap 4 官方網站。