Bootstrap vs Material UI
在Web开发中,你应该选择Bootstrap还是Material UI?这是一个长期困扰前端开发者的问题,尤其是那些刚刚开始挖掘前端框架的人。关于这两个问题有很多辩论和争论,但没有人有一个明确的答案。因此,我们将尝试对你应该使用哪一个框架做出明确的区分。
Bootstrap 是一个强大的、免费的、开源的CSS框架,由Twitter创建,作为他们的内部框架,通过实现预定义的类来构建响应式网站和网络应用程序,使开发者的生活更加轻松。自从Twitter在2011年将其开源以来,Bootstrap是最受欢迎和使用最多的CSS框架,拥有一个庞大的社区。许多大公司,如Airbnb、苹果音乐、Dropbox、Coursera等等。
Material UI是在2017年,它主要是在Facebook的React框架和谷歌的Material Design准则上工作。它提供了一个详尽的框架,用于创建具有高互动性和移动优先UI的响应式设计的网站和应用程序。Material Design和Material UI之间有着紧密的联系,Material UI只是一个没有Material Design的组件库。谷歌在其所有的产品中都使用了Material Design,而新近流行的Material UI目前被NASA、Unity、亚马逊、摩根大通使用,而且这个名单在未来几年还会增加。
Bootstrap | Material UI |
---|---|
它是一个HTML、CSS和JS框架,用于制作移动友好的响应式网站,并且易于创建。 | Material UI是一个基于React UI和Material Design的高度互动和可定制的框架。 |
由Twitter开发,最初名为Twitter蓝图。 | 参照谷歌的材料设计,由个充满激情的小团队开发。 |
目前,这是一个开源项目,由Mark Otto、Jacob Thornton和一小群核心开发人员以及一个庞大的贡献者社区维护。 | 由创始团队和核心贡献者小组以及材料社区维护。 |
因为有可重复使用的代码,所以开发速度高 | 与bootstrap相比,开发速度较低,但可以通过广泛使用可重复使用的组件和模板来提高。 |
12列网格系统用于响应式设计 | 12列网格系统与bootstrap相同 |
Bootstrap的信息布局为所有平台提供了一个清晰而一致的用户界面。 | 此外,它是一个移动优先,支持所有平台,但过多使用定制、过渡和动画可能会影响某些平台的可访问性。 |
如果不进行适当的优化和重构,不必要的JS、jQuery脚本和大的类定义可能会使该应用程序变得沉重。 | 它在React JS组件上工作,这些组件可以相互独立。它不需要任何库来工作,因此我们可以只使用我们需要的东西。 |
Bootstrap非常一致,提供了一个简单、清晰的界面,,很容易学习。而且相对来说,可定制性不如Material UI。 | Material UI是高度可定制的,设计师可以用它来创造大量的设计。但它可能会在组件之间产生不一致的情况。 |
我们可以同时使用它们吗?
是否有可能同时利用这两方面的优势?要享受时尚的响应式设计,而不需要花太多的时间为各种平台调整应用程序?
是的,材料设计通过Bootstrap(也被称为mdbootstrap)使之成为可能。它是一套建立在Bootstrap上的库,并遵循其他知名框架和内容设计准则,如Vue、Angular、React。允许那些组合开发者使用大家都熟悉的Bootstrap语法,所以开发时的问题会更少。你可以在这里了解mdbootstrap。
你应该为你的下一个开发项目选择哪一个?
你可以想象,这个问题的答案只取决于你正在进行的项目和你努力实现的目标。如果你的目标是在较短的时间内创建一个简单而专业、高度响应的网站,Bootstrap应该是你的设计工具。
如果你想要一点复杂的东西,结合别出心裁的自然设计,有鲜艳的色彩、视觉道具和微妙的动画,那就考虑材料设计吧。