Bootstrap 5的第一個Alpha版發佈了！
幾個月來我們一直在努力完善v4版中開始的各項工作，並對自己的進步感到很滿意，但我們要做的事情還有很多。
我們一直在努力簡化v4到v5的遷移過程，但也並不會駐足於那些已經過時或不再合適的內容上。因此，隨着v5的發佈我們很高興地宣佈，Bootstrap不再依賴jQuery，並且我們放棄了對Internet Explorer的支持。我們的重心是構建面向未來的工具，雖然我們還沒有完全做到這一點，但承諾帶來CSS變量、更快的JavaScript、更少的依賴項和更好的API，對我們來說肯定是正確的選擇。
在更新之前，請記住v5現在處於Alpha狀態，在我們的第一個Beta版本發佈之前還會有新的重大更改。我們還沒有完成所有的增刪工作，因此如果你有任何疑問或反饋，請檢查open issue和PR。
下面我們來深入探討這個新版本的一些亮點！
新外觀
我們以v4.5.0版本內文檔首頁的改進爲基礎，爲其他文檔帶來了新的外觀和體驗。我們的文檔頁面不再以完整寬度呈現，以提高可讀性，讓我們的網站更像是內容風格而非應用風格。此外我們還升級了側邊欄，以使用可擴展的部分（由我們自己的Collapse插件提供支持）來實現更快的導航。
我們還打造了一個全新的Logo！詳情在新版穩定下來後會進一步介紹，現在可以說的就是我們想給Logo來點新風貌。
受一開始創建這個項目的CSS的啓發，我們的Logo有一種規則集的感覺——由花括號包圍的樣式。我們很喜歡它，希望大家也能喜歡。隨着我們不斷完善和發佈新版本，預期它會逐漸更新到我們的文檔和博客中。
jQuery和JavaScript
在過去的十五年中，jQuery爲數以百萬計（甚至數以十億計？）的人們帶來了對複雜JavaScript行爲的強大支持。就我個人而言，我將永遠感激它爲我提供的能力和支持，它爲我編寫前端代碼、學習新知識並利用社區中的插件提供了很多幫助。也許最重要的是，它永遠改變了JavaScript，而這也是jQuery成功的里程碑。感謝所有jQuery貢獻者和維護者，他們爲今天的這一切付出良多。
得益於前端開發工具和瀏覽器支持的進步，我們現在可以移除jQuery這個依賴項了，而用戶並不會有什麼感覺。我們的主要JavaScript維護者@Johann-S負責了這項艱鉅的工作。它是這個框架多年來最大的變化之一，也意味着基於Bootstrap 5構建的項目將大幅縮減文件大小，並提升頁面加載速度。
除了移除jQuery外，我們還對v5中的JavaScript做了其他一些更改和增強，主要側重於提升代碼質量並試圖彌合v4和v5之間的鴻溝。我們的一大變化是放棄了Button插件的多數內容，而僅使用HTML和CSS來切換狀態。現在，toggle按鈕由checkbox和radio按鈕提供支持，並且更加可靠。
你可以在GitHub上的第一個v5 alpha項目中查看JS相關更改的完整列表。
CSS自定義屬性
如前所述，由於放棄了對Internet Explorer的支持，我們得以開始在Bootstrap 5中使用CSS自定義屬性。在v4版中我們只包含了一些顏色和字體的根變量，現在我們加入了CSS自定義屬性，讓很多組件和佈局選項受益。
以我們的.table組件爲例，其中添加了一些局部變量，讓開發人員更容易做出striped、hoverable和active的表格樣式：
.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};
// Styles here...
}
我們正在努力利用Sass和CSS自定義屬性的強大能力，以打造更加靈活的系統。你可以在Tables文檔頁面中查閱更多相關信息。不久的將來我們還會在按鈕之類的組件中見到這些特性的應用。
改進的自定義文檔
我們對文檔做出了諸多改進，提供了更多解釋，消除了歧義，併爲Bootstrap的擴展提供了更多支持。首先要說的就是全新的“自定義”部分。
v5的“自定義”（Customize）文檔在v4的“主題”（Theming）頁面上進行了擴展，提供了更多內容和代碼段，幫助開發人員基於Bootstrap的源Sass文件構建內容。我們在這裏加入了更多內容，甚至提供了一個入門npm項目，幫助用戶快速上手。它也是GitHub上的一個模板存儲庫，因此你可以自由fork。
我們也在v5中擴展了調色板。藉助內置的豐富顏色系統，你可以更輕鬆地自定義應用的外觀，過程中無需離開代碼庫。我們還做了一些工作來改善色彩對比度，甚至在色彩文檔中提供了色彩對比度指標。希望這能爲Bootstrap支持的站點帶來更好的可訪問性。
表單更新
除了新的“自定義”部分外，我們還對“表單”（Forms）文檔和組件進行了全面修訂。我們將所有表單樣式合併到了一個新的“表單”部分（包括輸入組組件），以給予它們應有的重視。
除了新的文檔頁面外，我們還重新設計了所有表單控件，移除了重複內容。在v4版中，我們引入了一套豐富的自定義表單控件（check、radio、switch、file等），但這些功能是對各款瀏覽器提供的默認設置的補充。在v5中，我們實現了完全自定義。
如果你熟悉v4的表單標記，新內容接受起來也會很容易。表單控件合併爲一組，並重新設計現有元素（而不是做新元素或僞元素）後，我們就能提供更加一致的外觀和體驗。
<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>
每個checkbox、radio、select、file、range等元素都包含自定義外觀，以統一跨OS和瀏覽器的表單控件的樣式和行爲。這些新的表單控件都是基於完全語義化的標準表單控件構建的，不再需要多餘的標記，只有表單控件和標籤。
請查閱新的表單文檔，告訴我們你的看法。
實用程序API
我們很高興看到有很多人都在構建新穎有趣的CSS庫和工具包，不斷改進我們構建Web內容的方式。因此，我們在Bootstrap 5中實現了全新的實用程序（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);
自從實用程序成爲一種首選的構建方式以來，我們一直在尋找適當的平衡點，以便在Bootstrap中實現它們的同時提供控制和自定義功能。在v4中，我們使用了全局$enable-*類來實現它，在v5中則更進一步。但採用基於API的方法後，我們在Sass中創建了一種語言和語法，讓你可以即時創建自己的實用程序，同時還可以修改或刪除我們提供的實用程序。
我們認爲這對於那些基於我們的源文件構建內容的開發人員來說是一大利好，歡迎大家嘗試。
注意！我們將之前的一些v4實用程序移到了新的“幫助程序”（Helper）部分。這些幫助程序是一些代碼段，比你常用的property-value更長一些。這改善了命名操作和我們的文檔內容。
增強網格系統
從設計上來說，Bootstrap 5並沒有對v4推倒重來。我們希望大家都能更輕鬆地升級到這個新版本上。因此，我們將大部分構建系統保留在原位（只是拿掉了jQuery），並且我們還保留了現有的網格系統。
以下是我們在網格中所做更改的摘要：
- 我們添加了一個新的網格層！那就是xxl。
- .gutter類已被.g*實用程序替代，它很像我們的margin/padding實用程序。我們還爲網格gutter spacing添加了一些選項，以配合大家熟悉的spacing實用程序。
- 表單佈局選項已替換爲新的網格系統。
- 添加了Vertical spacing類。
- 列默認不再是position: relative。
下面是一個新的網格gutter類的快速示例：
<div class="row g-5">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
查看文檔以瞭解更多信息。
CSS網格佈局正在日益完善，我們也在持續關注並學習它。預計將來的v5版本會進一步與之產生交集。
文檔
我們將文檔靜態站點生成器從Jekyll切換到了Hugo。長期以來，Jekyll一直是我們的首選生成器，因爲它安裝和運行起來非常容易，並且部署到GitHub Pages也十分簡單。
但這些年來，我們在Jekyll上遇到了兩大問題：
- Jekyll要求安裝Ruby
- 站點生成速度非常緩慢
相比之下，Hugo是用Go編寫的，因此它沒有外部運行時依賴項，並且速度更快。我們構建當前的主分支站點（包括文檔的Sass->CSS轉換）只用了1.6秒。我們的本地服務器重新加載的時間從8-12秒縮短到了毫秒計，大大改善了處理文檔的體驗。
即將推出：RTL、offcanvas等
我們的第一個Alpha時間不夠，還有很多內容沒有加入進來，預計它們會在之後的版本中實現。這裏先提前預告一下相關內容。
- RTL即將到來！我們已經用RTLCSS做了一個PR，並且還將繼續探索邏輯屬性。就我個人而言，很抱歉花了這麼長時間才解決這個問題，我們知道社區爲此付出了多大努力。希望等待是值得的。
- 我們的modal有一個分叉的版本，實現了offcanvas菜單。這裏還需要做很多工作來控制開銷，改善體驗。但有了offcanvas包裝器後，大家就可以放很多適合側邊欄的內容（導航，購物車等）了。
- 我們正在評估其他許多更改，包括Sass模塊系統、更多CSS自定義屬性的應用，將SVG嵌入HTML而不是CSS等等。
未來還會有很多改進，包括更多文檔改進、錯誤修復和體驗增強。請務必查看我們的open issue和PR，以提供反饋、測試社區PR或分享看法。
試用
可以訪問 https://v5.getbootstrap.com/ 獲取新版本，或在命令行中輸入：
npm i bootstrap@next
下一步計劃
在v5中我們還有很多工作要做，其中包括一些重大更改。我們將盡可能聽取反饋，與大家保持同步。我們的目標是在3-4周內再發布一次Alpha版，此後可能還會再發布幾次。我們還將發佈v4.5.1版本，以修復一些舊問題。
除此之外，請密切關注Bootstrap Icons項目，我們的RFS項目（現在在v5中已默認啓用）和npm starter項目的更新信息。
原文鏈接：