摘要：去掉了對的支持，并使用和單位。更新了所有偽元素選擇器的使用規范，首選雙冒號如，而不是。卡片現在有不同的輪廓和進一步支持基于類的擴展。代表水平方向，代表全部。

Bootstrap 這個號稱世界第一的 responsive 和 mobile first 前端樣式組件庫去年八月發布了 v4.0 Alpha，去年年底時發布了 v4.0 Alpha 2 版本。可能是 v3 用的過于順手，直到今天才決定踏上 v4.0 這艘船，讓我們一起來看它是說翻就翻，還是屹立不倒。

根據官方文檔，我們先來看看 v4.0 相比 v3.0 做了那些改變：

從 Less 遷移到 Sass。感謝 Libsass, Bootstrap 現在編譯的更快了，而且 Sass 社區在快速壯大。

升級柵格系統。我們添加了新的柵格排列來根更好地適應移動設備，并且完全重構了語義的 mixins。

有了可選的 flexbox 支持。通過一個變量開關，你可以重新編譯你的CSS 使用基于 flexbox 的柵格系統和組件，直接進入未來模式。

去掉了 well，thumbnail 和 panel，并用 card 來代替。 card 是 Bootstrap 中一個全新的組件，你會覺得它似曾相識，因為它和 well，thumbnail 和 panel 的用法差不多，并且會更好。

加固了所有的 HTML reset 代碼，用一個新的模塊：Reboot。 Reboot 做了一些 Normalize.css 沒有做的事。在一個多帶帶的 Sass 文件中給你提供了很多的重置選項，例如：box-sizing: border-box, margin tweaks 等。

全新的自定義選項。并非像 v3 中那樣把裝飾性樣式，如：gradients, transitions, shadows 等放在各自的文件中。我們把這些選項移到了 Sass 的變量中。希望默認的把 transitions 應用到所有元素上或者禁用掉圓角？你只需要更新一個變量然后重新編譯。

去掉了對 IE8 的支持，并使用 rem 和 em 單位。拋棄 IE8 意味著我們可以使用 CSS 中最好的那些屬性而不用被 CSS hacks 或 fallbacks 所牽制。使用 rem 和 em 替代像素更適合做響應式排版，調整組件大小更方便了。如果你需要支持 IE8，繼續用 Bootstrap 3 就好。

重寫了我們所有的 JavaScript 插件。所有插件使用 ES6 重寫，得以使用最新的 JavaScript 特性。并且他們現在支持 UMD，通用的 teardown 方法，參數類型檢查，等很多優點。

增強 tooltip and popover 的自動定位，多虧了 Tether 這個開源庫的支持。

改進了文檔。我們用 Markdown 重寫了它，并且添加了一些好用的插件來提高例子和代碼片段的效率。還用這種方法改進了搜索。

當然還有成噸的優化！你可以自定義 form control，margin 和 padding 的類，還有很多新的工具類。

再來看看 Bootstrap 4.0 Alpha 2 相比之前的 Alpha 1 版本做了哪些改進工作：

使用數字堆疊徹底重構了間隔工具類(spacing utilities)（避免與柵格混淆）

持續地重構，在多個組件中使用相同的類來替換某些根據標簽的選擇器（包括分頁，列表等）。還有更多其他組件也在重構中。

恢復媒體查詢和柵格容器的單位 rem 到 pixel 因為 viewports 不會被 font-size 影響。（詳情見 issue #17403。我們還有成噸的柵格需要處理。請關注 issue #18471）

為了組件的一致性恢復邊框寬度 .0625rem 到 1px，以避免縮放和 font-size的 bug 在不同瀏覽器的兼容問題。

重命名 .img-responsive 為 .img-fluid 以避免將來各種響應圖像解決方案出現混亂。

替換 ZeroClipboard 為 clipboard.js，可以不依賴 flash 了。

輸入框和按鈕共享相同的邊框值以確保組件總是同樣大小。

更新了所有偽元素選擇器的使用規范，首選雙冒號（如，::before 而不是 :before）。

卡片現在有不同的輪廓和 mixins 進一步支持基于類的擴展。

用來實現 floats 和文字對齊的工具類現在有了響應式范圍。這意味著我們已經放棄了非響應類，以避免重復。

增加了對 jQuery 2 的支持

還有成百上千的 Sass 優化，bug 修復，文檔更新等等。

看完這些，心里大致有了個底：
js 的 API 基本沒變（算你有良心）。well，thumbnail 和 panel 被干掉了，全部用 card 代替（之前的確實太復雜）。長度單位被換成了 rem 和 em，但是 rem 有兼容性 bug，某些地方又被換回了 "px"（心好累）。添加了一些新的工具類，可以直接寫 class 設置間隔了（敲黑板，曾經為了偷懶，我們一直在這么玩）。

下面讓我們來仔細看看 Bootstrap v4.0 Alpha 2 的新特性。

v4.0 中使用 Reboot 重置瀏覽器的默認樣式。

[hidden] { display: none !important; }

HTML5 添加了一個全局的新屬性 [hidden]，它的默認效果和 display: none 一樣。這里借用了 PureCSS 的思想。雖然 [hidden] 在 IE9-10 中并不被支持，通過明確的聲明解決了這個問題明確聲明.

值得一提的是，v4.0 針對觸摸屏設備的點擊延時做了優化。做過移動端頁面調優的同學都知道，在移動設備上，用戶的點擊事件有大約 300 毫秒的延時，這個特性是為了方便識別的用戶雙擊操作，以自動放大或縮小屏幕。

v4.0 的一大特點是，增強了對響應式的支持，或者說：強制你寫出支持響應式的頁面。

v4.0 已經沒有了 .hidden 這個通用的 class，想要隱藏某個元素的話強烈建議遵循響應式的需求使用響應式的 class 向上生效，或者向下生效。

v4.0 去掉了 well，thumbnail 和 panel，用一個 card
解決所有問題。

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card"s content.
    Button
  

這樣可以少糾結那些的細小的區別了。

  

    

      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      
    
  


  

    

      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      
    
  

用 card 實現的 well

v4.0 中新增了很多方便調用的工具類，我們來大概刷一遍。

.m-t-0 {
  margin-top: 0 !important;
}

.m-l-1 {
  margin-left: $spacer-x !important;
}

.p-x-2 {
  padding-left: ($spacer-x * 1.5) !important;
  padding-right: ($spacer-x * 1.5) !important;
}

.p-a-3 {
  padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}

哇擦！這些用來設置間距的工具類，你們感受一下。x 代表水平方向，a 代表全部。最后的數字可以簡單理解為一個字符的寬度（水平方向）或者一行的高度（垂直方向）。使用后的感受是：這樣調間距方便極了，有木有！

Bootstrap 甚至還包含了一個 .m-x-auto 的 class，用它可以快速把水平 margin 設為 auto。

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  @include center-block;
}

使用 margin 的 auto 值劇中塊級元素。

 .text-hide {
    font: "0/0" a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

// Usage as a mixin
.heading {
  @include text-hide;
}

通過給文字設置透明的顏色來隱藏文字，用來做 logo 圖片的文字隱藏最好不過了。

// Class
.invisible {
  visibility: hidden;
}

// Usage as a mixin
.element {
  .invisible();
}

替開發者想的真是周到。

大國之重器，前端黑科技
我們啥都不缺！
—Bootstrap v4.0