近年来,人们对 bootstrap 等组件库的兴趣似乎大幅下降,而 Tailwind 则更受青睐。
- Tailwind :对组件进行精细控制,而不是使用预用的东西,
- bootstrap :学习曲线要低得多
Bootstrap 解决的最大问题之一是布局。
- 现在我们有了网格grid和弹性框flexbox,
- 人们不再需要Bootstrap之类的框架来简化布局。
转向基于组件的框架,以及 css、html 和 js 的改进速度加快,意味着 Bootstrap 等框架比 vanilla 框架的优势更少。
- Bootstrap 仍是原型和内部工具的重要资源
Bootstrap中:
- 你不需要编译任何东西,也不需要构建工具。因为它的组件已经设置好了。
- 当然,如果你想定制,可以找到其他选项,但真正的原因是它非常容易上手。
Bootstrap 不再是唯一的。Ant design、foundation、bulma、众多材料实现之一、语义 Ui 等等。它们都提供相同类型的开箱即用设计系统体验。并不是说哪个更好。但是 bootstrap 在这个领域有竞争对手。它不再垄断了。
bootstrap 太大了:
- 我们大多数人不需要他们的整个 css 文件
- 需要使用 Sass 导入所需的部分来组合,而不是导入整个CSS文件。
- 除了 sass ,要么使用带有 CSS 模块的 webpack,要么使用带有 PurgeCSS 的 tailwind PostCSS。
bootstrap 解决的最大问题是团队合作。
Web 开发包含两个截然不同的领域,它们对工具的要求截然不同: 1、制作一般公众访问的网站,通常用于销售或宣传产品或服务。这些网站需要非常注重设计方面的细节和灵活性,并且通常力求看起来独特或原创,并且对复杂的交互元素的要求可能相当低 - 几个不同的按钮、一些图像滑块、一个下拉菜单和一个文本框。
bootstrap 曾经为人们提供了一个可靠的样板“重置”css,以便人们开始自定义这些内容。随着大量重置功能被吸收到核心规范中,对 bootstrap 这样臃肿的东西的需求减少了,因此出现了像 tailwind 这样的工具,使设计师能够做他们的事情。这些网站往往只有几页,因此使用一个伪库是可行的,它提供了一定的一致性,但允许灵活性。
2、Web 开发的另一面是“管理面板”或“公司仪表板”。这些是基于 Web 的应用程序,通常位于登录屏幕后面,并且通常位于公司防火墙后面。它们需要复杂的表单控件、易于维护的设计系统,以便非设计人员应用于未知数量可重复元素的复杂布局,并且通常有数百个不同的“页面”,每个页面都需要一致的外观和感觉。这是 bootstrap 仍然有一席之地的地方。
bootstrap与tailwind比较 虽然 bootstrap 和 tailwind 之间确实存在一些交叉,但我认为它们有着根本的不同:
- Tailwind 是 nocss,
- 而 Bootstrap 是 css++
但是你错过了 Tailwind 的真正优势:DOM 和样式之间没有脱节。
- 当你有大型项目时,css 最终会变得一团糟,它只会变成追加,然后就会变得一团糟,
- 而 tailwind 样式直接应用于 html,因此即使是大型开发团队也可以非常轻松地保持样式的一致性和紧凑性。
- Bootstrap 是一个完整的设计系统和组件生态系统。
- Tailwind 是用于 css 的 typescript。
Bootstrap也可以做成tailwind那样组件: 看看 Bootstrap 的文档,你就会发现它的每一点都可以通过 SASS 进行自定义。很多人都没有意识到,当你摒弃默认样式时,Bootstrap 是多么强大。此外,既然 Bootstrap 已经解决了一些令人惊叹的问题,比如始终确保foreground 在background 上可见,这样如果您将background 背景颜色从浅色改为深色,前景foreground 文本就会切换为相反的颜色,那么为什么还要重新发明轮子呢?
我是开发人员,不是设计师,所以设计师会设计出他们想要的用户界面。然后我使用 SASS,导入 Bootstrap 工具和我想要的 Bootstrap 的相关部分,然后按照设计师的要求进行定制,我可以告诉你,它看起来一点也不像 Bootstrap,但仍然可以在一个地方轻松定义一致的样式......
现在,当我想给某个东西设计样式时,我只需给它一个类(而不是像 Tailwind 中的 23 个类......),它看起来就像他们想要的那样。另外,更棒的是,当设计者改变主意时,我们只需在一个文件中更改几行,就能让所有地方都发生变化,而无需更改每个组件文件或在无数个地方添加大量内联类。
不要这么快就放弃它,而是要学习如何充分发挥它的威力!