摘要：去掉了對的支持，并使用和單位。更新了所有偽元素選擇器的使用規(guī)范，首選雙冒號(hào)如，而不是?？ㄆF(xiàn)在有不同的輪廓和進(jìn)一步支持基于類的擴(kuò)展。代表水平方向，代表全部。

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

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

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

升級(jí)柵格系統(tǒng)。我們添加了新的柵格排列來根更好地適應(yīng)移動(dòng)設(shè)備，并且完全重構(gòu)了語義的 mixins。

有了可選的 flexbox 支持。通過一個(gè)變量開關(guān)，你可以重新編譯你的CSS 使用基于 flexbox 的柵格系統(tǒng)和組件，直接進(jìn)入未來模式。

去掉了 well，thumbnail 和 panel，并用 card 來代替。 card 是 Bootstrap 中一個(gè)全新的組件，你會(huì)覺得它似曾相識(shí)，因?yàn)樗?well，thumbnail 和 panel 的用法差不多，并且會(huì)更好。

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

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

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

重寫了我們所有的 JavaScript 插件。所有插件使用 ES6 重寫，得以使用最新的 JavaScript 特性。并且他們現(xiàn)在支持 UMD，通用的 teardown 方法，參數(shù)類型檢查，等很多優(yōu)點(diǎn)。

增強(qiáng) tooltip and popover 的自動(dòng)定位，多虧了 Tether 這個(gè)開源庫的支持。

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

當(dāng)然還有成噸的優(yōu)化！你可以自定義 form control，margin 和 padding 的類，還有很多新的工具類。

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

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

持續(xù)地重構(gòu)，在多個(gè)組件中使用相同的類來替換某些根據(jù)標(biāo)簽的選擇器（包括分頁，列表等）。還有更多其他組件也在重構(gòu)中。

恢復(fù)媒體查詢和柵格容器的單位 rem 到 pixel 因?yàn)?viewports 不會(huì)被 font-size 影響。（詳情見 issue #17403。我們還有成噸的柵格需要處理。請關(guān)注 issue #18471）

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

重命名 .img-responsive 為 .img-fluid 以避免將來各種響應(yīng)圖像解決方案出現(xiàn)混亂。

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

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

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

卡片現(xiàn)在有不同的輪廓和 mixins 進(jìn)一步支持基于類的擴(kuò)展。

用來實(shí)現(xiàn) floats 和文字對齊的工具類現(xiàn)在有了響應(yīng)式范圍。這意味著我們已經(jīng)放棄了非響應(yīng)類，以避免重復(fù)。

增加了對 jQuery 2 的支持

還有成百上千的 Sass 優(yōu)化，bug 修復(fù)，文檔更新等等。

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

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

v4.0 中使用 Reboot 重置瀏覽器的默認(rèn)樣式。

[hidden] { display: none !important; }

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

值得一提的是，v4.0 針對觸摸屏設(shè)備的點(diǎn)擊延時(shí)做了優(yōu)化。做過移動(dòng)端頁面調(diào)優(yōu)的同學(xué)都知道，在移動(dòng)設(shè)備上，用戶的點(diǎn)擊事件有大約 300 毫秒的延時(shí)，這個(gè)特性是為了方便識(shí)別的用戶雙擊操作，以自動(dòng)放大或縮小屏幕。

v4.0 的一大特點(diǎn)是，增強(qiáng)了對響應(yīng)式的支持，或者說：強(qiáng)制你寫出支持響應(yīng)式的頁面。

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

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

  
  

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

這樣可以少糾結(jié)那些的細(xì)小的區(qū)別了。

  

    

      
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 實(shí)現(xiàn)的 well

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

.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;
}

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

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

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

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

使用 margin 的 auto 值劇中塊級(jí)元素。

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

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

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

// Class
.invisible {
  visibility: hidden;
}

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

替開發(fā)者想的真是周到。

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