都 Bootstrap 5 了，你還在用幾？

時間 2020-06-21

原文原文鏈接

千呼萬喚的 Bootstrap 5 alpha 終於出來了！其中最大的改變就是 Bootstrap 再也不依賴 jQuery，再也不支持 IE。注意：不是不支持 jQuery，是再也不依賴！v5 將更多的聚焦將來，雖然將來將來。期許已久的 CSS 變量，更快的 JavaScript，更少的依賴，更好的 API，都將出如今 Bootstrap 5。

Logo 改進

設計靈感來自 Bootstrap 最初的 CSS 版本，新 Logo 兩端是 CSS 中最經常使用的一對花括號。我我的很喜歡 :)javascript

jQuery 與 JavaScript

偉大的 jQuery 使複雜多變的 JavaScript 變得更容易使用，賦予更多的人蔘與前端編程，爲 Bootstrap 生態提供了大量的插件。但隨着前端開發工具和瀏覽器的飛速發展，使得 v5 能夠放棄對 jQuery 的依賴。這是許多年以來 Bootstrap 最大的改變，也意味着基於 Bootstrap 5 構建的項目，文件更小，頁面加載更快。全部有關 JS 的改動能夠在此查閱。css

CSS 自定義屬性

因爲再也不支持 IE，Bootstrap 5 開始使用 CSS 自定義屬性。在 v4 中只包含了少許 root 變量定義顏色和字體，如今 v5 已經把它們添加到組件和佈局選項中了。 v5 正在同時使用 Sass 和 CSS 的自定義屬性，建立一個更靈活的系統。html

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};
}
複製代碼

能夠查閱更多關於這方面的信息，以 Table 的文檔爲例。前端

自定義文檔的改進

v5 在文檔方面作了不少工做：更多的說明、去除含糊不清的地方、更多的擴展支持。一切都從這個全新的板塊開始。在自定義主題方面，v5 充實了更多內容，甚至提供了一個 npm 的初始項目能夠更快更容易地開始，同時也方便以此爲 GitHub 中的一個模板 repo 去 fork。java

v5 也擴展了調色盤，內置擴展的顏色系統可讓你更容易地定義 APP 的外觀，尤爲是對比色的改進，甚至在顏色文檔頁面提供了對比色的度量標準。ios

表單的改進

v5 全面梳理了表單文檔和表單組件，整合全部的表單樣式，建立了全新的表單板塊（包括 input group 組件）。從新設計了全部的表單控件，在 v4 引入了表單控件套裝——checks、radios、switches、files 和其它——但這只是針對瀏覽器默認表單控件的擴展。如今，在 v5 中表單控件已經完全實現重定義，統一了各個瀏覽器默認的表單控件外觀。git

這一改進統一了表單控件在不一樣 OS 和瀏覽器下的表現和交互。須要強調的是，改進兼顧了語意化，保持標準的原生，並無引入額外的標籤，用的依然是原生的控件標籤。github

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
複製代碼

能夠到表單文檔這裏看個究竟npm

Utilities API

喜聞樂見地是，在過去的十幾年，總有開發者用新的 CSS 庫和工具包來挑戰 Bootstrap 原有的方式。它們耳目一新，也賦予 v5 更多的機會去探討和迭代。好比，v5 引入了一個全新的 utility API編程

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);
複製代碼