我一直在使用 Bootstrap。当时 Bootstrap 是一种设置响应式网站的简单方法。而且,由于他们提供的样式元素,它使您的生活变得更加轻松,并且开发一个像样的网站变得更加容易。
当时 Twitter 和其他几家流行的初创公司都在使用 Bootstrap。一开始它被称为 Twitter Bootstrap,因为它实际上是为在 Twitter 上使用而构建的。
然后 Bootstrap 迁移到版本 3,我一直想要一个不需要 jQuery 的 Bootstrap。jQuery 已经过时了,使用 vanilla JS 或 Vue 之类的东西比 jQuery 提供更多功能和模板更容易。
寻找替代品
所以我决定寻找一个替代框架。当时一些流行的 CSS 框架是 Foundation、SemanticUI。我一直发现 Foundation 是一个非常难以整合到网站的框架,今天回想起来,我发现该项目已被放弃。SemanticUI 也很棒,因为它的语义类更容易理解。但这也被创造者抛弃了。
我遇到了 Bulma,它是一个小型 CSS 框架,不包含任何 javascript 并且占用空间很小。我喜欢使用 Bulma,并在我的几个项目中使用过。
尽管当时有 Tailwind,但 Tailwind 的设置过程太复杂了,我总是试图远离它。
然后当 Tailwind 版本 2 出来时,我决定将它用于一个我即将上线的简单项目。Tailwind css 有一个实用程序类方法,Tailwind 提供了实用程序类,而不是像 Bootstrap 那样提供开箱即用的元素,您可以将它们组合起来创建任意数量的元素和设计,而无需编写任何额外的 CSS 代码,这非常棒。
我想我立刻就爱上了 Tailwind,在习惯了它之后,我在其他几个项目中使用了它,并继续使用 Tailwind 作为我的 css 框架,只要我想开始做一些事情。
bootstrap地狱
最近,我开始以开发人员的身份从事一个开源 HIMS(健康信息管理系统)项目(我将在以后的帖子中写到),在我的本地计算机上设置该项目后,我立即注意到的一件事是它需要用户界面改进。
该项目基于另一个 HIMS 项目,并具有多个 CSS 框架和沿途合并的自定义样式。
该项目已有旧版本的 Bootstrap,并且某些元素依赖于 Bootstrap。我想删除所有样式框架,内置样式并简化 CSS 以实现可维护性并改进 UI。由于项目的规模和需要快速开发,迁移到像 Tailwind 这样的东西太困难了。
由于当前发布的 Bootstrap 是第 5 版,我决定将项目迁移到 Bootstrap 5。自第 3 版以来我从未浏览过 Bootstrap 文档,在阅读文档后,我意识到这些年来发生了很多变化。
现在,Bootstrap 不是一个框架,它提供了开箱即用的从元素到组件的所有内容。它既不是像 Tailwind 这样的基于实用程序的框架,而是两者的混合,这非常令人困惑且难以实现。
例如,我记得在版本 3-4 中有btn-block使按钮全宽的 。
<button type="button" class="btn btn-primary btn-block">按钮</button>
但是,如果您在 Bootstrap 5 中制作全宽按钮,
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div>
结合我们的显示,创建响应式堆栈的全宽“块按钮”,就像 Bootstrap 4 中的那些。通过使用实用程序而不是按钮特定的类,我们可以更好地控制间距、对齐和响应行为。
https://getbootstrap.com/docs/5.1/components/buttons/
我记得 Bootstrap 有一个.buttons类,它很好地为该元素内的按钮添加了填充和间距。
开发人员抱怨 Tailwind 胜过 Bootstrap 的一方面是:人们不喜欢编写这么多实用程序类。但是当您在实用程序类中编写所有内容时,所有内容都在实用程序类中,并且几天后您也会习惯在实用程序类中编写所有内容。
但是现在有了 Bootstrap,它已经变成了实用程序类和组件的混合体,这使得事情变得比他们需要的更复杂。上面的按钮示例只是一个用例,你会在他们的文档中找到几个这样复杂的用例。
但是,我将能够成功地将项目迁移到 Bootstrap 5,但是,我不会从一开始就考虑将 Bootstrap 用于新项目。
附带说明一下,Bootstrap 将 jQuery 拖到了第 4 版,并从 2021 年发布的第 5 版开始完全放弃了 jQuery。我仍然觉得 Bootstrap 落后于一些现代框架,如 Tailwind。
您对 Bootstrap 5 有何看法?
宁波硅格科技