愛吃螃蟹的前端：登上 Bootstrap 4.0 的大船

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

4.0 vs 3.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 的類，還有不少新的工具類。

Alpha 2 vs Alpha 1

再來看看 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 的新特性。

Reboot

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

hidden 屬性

<input type="text" hidden>

[hidden] { display: none !important; }

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

優化觸摸屏的點擊延時

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

響應式加強

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

.hidden-*-*

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

新組件

Card

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

<div class="card">
  <img class="card-img-top" data-src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

這樣能夠少糾結那些的細小的區別了。

<div class="card card-inverse card-success text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-info text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

用 card 實現的 well

工具 Class

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

Spacing Class

.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。

.center-block

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

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

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

.text-hide

.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 圖片的文字隱藏最好不過了。

.invisible

// Class
.invisible {
  visibility: hidden;
}

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

替開發者想的真是周到。

總結

大國之重器，前端黑科技
咱們啥都不缺！

—Bootstrap v4.0