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

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

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

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

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

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

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

是什么改變了?

一個(gè)更平易近人的遷移

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

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

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

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

沒(méi)有jQuery

接下來(lái)，將刪除作為依賴項(xiàng)的jQuery。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果我們要使用Mono圖標(biāo)，這會(huì)產(chǎn)生一個(gè)設(shè)計(jì)問(wèn)題，因?yàn)樵谶@個(gè)項(xiàng)目中有兩種不同的圖標(biāo)樣式。

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

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

新的實(shí)用程序+新的實(shí)用程序API

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

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

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

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

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

結(jié)論

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

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

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

我們期待在更多的項(xiàng)目中使用Bootstrap 5。