Bootstrap与Material UI，哪个最适合Web应用程序？

Bootstrap 和 Material：详细比较

网格系统

Bootstrap 网格是一个移动优先的网格程序，它利用容器、行和列来使应用程序符合任何设备。行和列连接在一起形成一个或多个容器。引导网格系统是一个 12 列系统，具有一组要遵守的规则，例如行仅用于构造列，行内没有材料，只有列是行的直接子代，等等。

Material Designs 的响应式 UI 建立在 12 列的网格系统上。列宽是可变的，而在文本之间创建空间的装订线宽度是 0 到 10 像素之间的固定值。还为区分内容与左右屏幕边框的边距宽度指定了固定值。天沟和边缘宽度可以相等或不相等。当屏幕大小超过称为“断点”的预设值时，将启用网格功能。发生这种情况时，界面会适应屏幕大小并更改应用程序显示其内容的列数。这为开发人员和用户提供了一个完全响应的 UI。

依赖项

Bootstrap 不是一个简单的框架。该包涵盖了一系列功能和大量代码，包括许多脚本、CSS 类和 jQuery 依赖项。这会导致效率、应用程序的巨大尺寸、电池消耗和页面速度方面的问题。如果你付出努力并删除应用程序中未包含的组件，则可以摆脱 Bootstrap 框架的影响。然后，你将拥有一个可以运行的紧凑型应用程序。

Material UI 是一组使用 React 构建的组件。组件可以彼此独立使用，这意味着你的应用程序中只有应用程序使用的组件的样式。Material UI 完全用 CSS 编写，不涉及任何第三方库来工作。你只是得到你需要和想要的。

发展速度

Bootstrap 包含许多 UI 组件，例如排版、表格、按钮、导航、标签、通知、选项卡等。它提供了足够的必要元素，可以轻松创建美观的界面，让开发人员能够专注于应用程序的可用性。除此之外，还有几个主题和模板可供在 Internet 上下载。因此，发展速度很快。

Material UI 为程序员提供了基于材质的 UI 组件。它们有助于减少设计和应用程序开发所需的时间。但是，由于 Material UI 主要是一组 UI 组件，因此它的开发速度不如 Bootstrap。如果你想大幅提高开发速度，最好使用内容模板。

信息布局

Bootstrap 是一个用于组织和呈现信息的框架。我们强调“细节”这个词，因为 很多应用程序都是用简单的设计创建的，包括微妙的颜色、粗体和大标题，几乎没有动画。人们访问这些网站是为了尽可能快速轻松地获取详细信息，而不是为了体验时尚的按钮或流畅明亮的动画。Bootstrap 以最少的中断和简单易懂的 UI 提供了机会。

Material Design 是专门为移动设备创建的。由于移动屏幕很小，放置元素和细节的空间较小——Material UI 的解决方案是动画、图层、滑块和弹出窗口。手机没有指南针，因此用户必须识别他们在触摸屏上点击的位置——这是来自应用程序的动画输入的来源。虽然动画改善了用户界面并且看起来令人印象深刻，但如果你经常使用应用程序，这种令人愉悦的流畅动画可能令人生畏。使用 Material UI 让应用看起来很棒很简单，但美观的界面并不总能满足消费者的要求。

总结

如果你想在最短的时间内创建简单但高效且响应迅速的网站，Bootstrap 应该是您的首选设计工具。另一方面，Material Design 更复杂一些，具有鲜艳的色彩、视觉提示和优雅的动画，与富有想象力和直观的设计相得益彰。如果你只是想要两全其美，Bootstrap 的 Material Design 就是你的选择。