在Mono，我們使用Bootstrap已經(jīng)有一段時間了。我想我第一次使用Bootstrap是在版本2。

雖然我們喜歡能夠創(chuàng)建自定義設(shè)計并從頭開始實現(xiàn)它的自由，但不可否認(rèn)，在很多情況下，經(jīng)過實戰(zhàn)測試的框架可以節(jié)省時間。這樣你就不用白費力氣了。

Bootstrap發(fā)揮作用的一種情況是，當(dāng)您為后臺應(yīng)用程序進(jìn)行設(shè)計時，自定義視覺設(shè)計并不是最高優(yōu)先級的。

我們創(chuàng)建的一個后臺設(shè)計示例，它是使用Bootstrap實現(xiàn)的。公平地說，它有自己的設(shè)計定制，但也有很多引導(dǎo)代碼。

發(fā)布狀態(tài)

Bootstrap 5目前在第三個alpha版本中。他們的計劃似乎是在年底向公眾發(fā)布Bootstrap 5的最終版本。在我們最近的一個項目中，我們已經(jīng)使用了它，預(yù)計從現(xiàn)在開始直到發(fā)布之前，底層邏輯不會有太大的變化。

那么讓我們來談?wù)凚ootstrap 5中最重要的一些變化。

是什么改變了?

一個更平易近人的遷移

首先，這不是一個真正的特性，而是一種邏輯變化:從v4到v5的遷移比以前(從v3到v4)更容易實現(xiàn)。

對于那些考慮從Bootstrap 4切換到5的人來說，好消息是在CSS和默認(rèn)組件方面，沒有太大的變化。從4到5的類和邏輯非常相似。

Bootstrap團(tuán)隊似乎已經(jīng)確定了一個“穩(wěn)定的API”，即在不同版本之間不會過多地更改類名。

對于許多希望遷移并且不希望像v3遷移到v4那樣進(jìn)行類更改遷移的應(yīng)用程序來說，這是一個好消息。

沒有jQuery

接下來，將刪除作為依賴項的jQuery。

切換和modals等JS插件的JS邏輯現(xiàn)在都是用普通JS編寫的。如果你真的想使用jQuery，還是有可能的(參見這個文檔條目)。

JS文件甚至可以作為ESM模塊使用，這允許您在瀏覽器中直接將Bootstrap作為模塊使用，如果您的瀏覽器支持它的話。然而，依賴于Popper的插件還沒有這樣工作。

此舉刪除了一個依賴項，并使引導(dǎo)程序現(xiàn)代化。jQuery是過去的東西，它確實提供了很大的幫助，但它已經(jīng)達(dá)到了它的目的。jQuery不屬于2020年啟動的開發(fā)項目。

然而，我不知道我是否會在實踐中實際遇到這段代碼，因為處理modals、彈出框等的邏輯可能包含在項目中使用的Javascript框架中。許多Javascript框架都有一個特定于該框架的Bootstrap的重新實現(xiàn)(比如ng-bootstrap)。

我相信源文件將主要用作預(yù)期功能的參考。我不認(rèn)為在開發(fā)的情況下你可以直接使用它們。

用于快速定制的CSS自定義屬性

Internet Explorer的支持已經(jīng)被取消，這為使用更新的CSS特性，如CSS自定義屬性鋪平了道路。

在實踐中，這允許您在沒有編譯步驟的情況下自定義Bootstrap。如果設(shè)計的某個方面使用CSS自定義屬性，您可以簡單地放入代碼來覆蓋它，而不需要設(shè)置基于saas的工作流，在工作流中覆蓋框架變量。

我想，當(dāng)您快速地想要調(diào)整一些顏色時，這可能非常有用。在這個簡潔的REPL中演示了它的工作方式，其中一個表被定制為有一些其他的顏色。

引導(dǎo)程序圖標(biāo)

Bootstrap現(xiàn)在自帶了它自己的圖標(biāo)集。我不確定自己是不是這種風(fēng)格的擁躉，但關(guān)注這一領(lǐng)域是件好事。沒有處理圖標(biāo)的UI框架是不完整的。

在我們的項目中，我們可能會使用自己的Mono圖標(biāo)作為默認(rèn)選擇;在最近的項目中，我們定制了Bootstrap 5來與我們的圖標(biāo)集一起工作。

在Alpha 3中，Bootstrap團(tuán)隊添加了一個新的Accordion組件。

檢查代碼時，它直接在CSS中使用SVG作為數(shù)據(jù)圖像。

如果我們要使用Mono圖標(biāo)，這會產(chǎn)生一個設(shè)計問題，因為在這個項目中有兩種不同的圖標(biāo)樣式。

我已經(jīng)可以看到我們將不得不創(chuàng)建這個組件的定制版本的工作。這正是Bootstrap有時會遇到的問題:如果您不按原樣使用它，您有時會給自己帶來麻煩。

幸運的是，您可以簡單地創(chuàng)建一個不包含某些元素的自定義樣式表。例如，我們在Bootstrap 4中從未使用過“大屏幕”組件。我們將檢查該組件是否有用，或者是否需要提供自己的版本。

新的實用程序+新的實用程序API

我對基于實用程序的CSS又愛又恨。我喜歡它的快速原型，但是當(dāng)一組不優(yōu)雅的div和類進(jìn)入生產(chǎn)并成為維護(hù)的地獄時，我討厭它。

在Alpha 3的博客文章中，引導(dǎo)程序談到了新的實用程序類，甚至還談到了生成實用程序類的整個API。

這顯然是受到了“順風(fēng)車”的啟發(fā)，那些在Twitter上關(guān)注我或閱讀我個人博客的人都知道我，呃哼，并不是我的超級粉絲。

通常，我也不喜歡使用太多Sass特性來生成代碼，從而使CSS過于復(fù)雜。我認(rèn)為它增加了復(fù)雜性。一個設(shè)計很少需要5個不透明類，就像在utility API頁面上的第一個例子中解釋的那樣。

當(dāng)我開始使用這段代碼時，這篇文章本身可能就是一篇博客。

結(jié)論

對于我們來說，Bootstrap作為web應(yīng)用程序的技術(shù)基礎(chǔ)仍然是一個可靠的選擇，特別是對于資源有限的項目。

我們通常使用一些定制來擴(kuò)展Bootstrap以使其符合我們的喜好。我們發(fā)現(xiàn)，使用一個正在積極維護(hù)的已知框架有很大的價值。

當(dāng)我們可以從包含通用設(shè)計模式的基礎(chǔ)上開始設(shè)計工作時，我們就可以把時間花在弄清楚手頭設(shè)計項目的確切需求上，而不是不斷地重復(fù)發(fā)明輪子。

我們期待在更多的項目中使用Bootstrap 5。