Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit

在过去几年中,最终用户的浏览习惯已经发展到包括各种设备。因此,响应式网页设计是当今开发的每个网站的必需品。但是,为每个项目从头开始创建响应式设计可能非常耗时。让您的生活更轻松的一个很好的解决方案是使用CSS框架。这样的框架为您提供基本的响应式设计原则。在这个比较中,我们看看一些最好的CSS框架,看看哪个是最好的。这是Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit。

本文将指导您为下一个项目选择合适的CSS框架。我假设您具有前端技术和响应式Web设计原则的基本知识。每个CSS框架都经过测试,涵盖了Bootstrap vs Foundation和Bulma vs Semantic vs UIkit的各个方面。我介绍了每个框架的起源及其主要特征。我还为您提供了每个框架的快速入门指南。

在本文的最后,您将了解每个框架的主要功能和限制,并能够更好地确定哪些框架最适合您的需求。让我们开始吧:

Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit

  • 引导#
  • 基础#
  • 布尔玛#
  • 语义#
  • UIkit#
  • 最后的想法 #

Bootstrap(getbootstrap.com) Bootstrap vs

Bootstrap是一个响应迅速,移动优先的CSS框架,可以快速开发网站。它是这个列表中最受欢迎的CSS框架,在GitHub上有超过130k的星星。 Bootstrap包含使用HTML,CSS和JavaScript开发的即用型组件。

Bootstrap最初是在2011年在Twitter上开发的,但它最终演变成一个独立的项目。目前的稳定版本是4.3。 Bootstrap 5,目前正在开发中,将取代jQuery与vanilla JS的使用,支持过时的浏览器并更改当前的测试平台。

要使用Bootstrap,您必须在构建新网页时执行以下操作:

  • 使用HTML5 doctype
  • 创建视口元标记
  • 在head标签中导入Bootstrap CSS
  • 按jQuery,Popper.js和bootstrap.min.js的顺序导入脚本以使用任何Bootstrap的JavaScript功能

这是一个入门模板。

… …

在本教程中,我们将使用CDN托管的资源版本(CSS和JS文件)来构建这些框架。这是Bootstrap的快速入门指南。

除了强大的移动优先方法之外,还有重要的社区支持,这些支持符合框架的成熟度。此外,虽然Bootstrap维护了一个已批准的框架和工具包列表供您选择,但第三方开发人员还提供了Bootstrap的工具包和软件包,可以轻松地与您的项目集成。这是我们为Bootstrap选择的免费UI工具包。除了首先是移动之外,还有一些支持触摸屏。由于Bootstrap是一个成熟的项目,它支持许多辅助功能。

Bootstrap的最大缺点是页面重量的增加。虽然在平均页面大小约为2MB的世界中,几百千字节可能并不重要,但它可能会关注那些追求最高效率的开发人员。对jQuery的依赖是一个问题,尽管知道jQuery的删除是Bootstrap 5路线图的一部分是令人鼓舞的。

?优点:

  • 移动优先,响应式网页设计框架
  • 良好的社区支持和文档

?缺点:

  • 大的依赖大小(~300KB)
  • 依赖于jQuery以使某些组件工作

如果您正在寻找具有良好支持基础的稳定平台,Bootstrap应该是您的首选。如果您不希望修改默认组件,这是正确的选择。 Bootstrap非常适合那些希望在敏捷环境中快速迭代解决方案的用户。

基金会(foundation.zurb.com) 基金会vs.

Foundation是2011年Bootstrap一个月内首次发布的,它不仅适用于网站,还适用于应用程序和电子邮件,是一类前端框架!让我们看看Bootstrap与Foundation如何叠加!

就像Twitter上的Bootstrap一样,Foundation在Zurb基金会作为内部工具开始,然后最终作为框架发布。 Foundation的源代码是开源的,重点是移动优先响应式设计。 Foundation有一个类似于Bootstrap的网格系统,有12列可供选择。此外,JavaScript也是可选的!

在您的网站上使用Foundation的主要步骤如下:

  • 下载Foundation资源
  • 使用HTML5 doctype
  • 在head标记中添加Foundation CSS文件
  • 包括jQuery,what-input.js和Foundation的脚本
  • 在结束body标记之前,调用foundation()函数将Foundation属性附加到各种DOM元素

这是一个快速启动模板:

如果适合您的需要,您可以下载Foundation框架的自定义版本。

当我们尝试比较Bootstrap与Foundation时,会出现一些问题。 Bootstrap提供了来自社区的更多支持,更容易使用,并且在开始时为您提供了广泛的主题供您选择。另一方面,Foundation为您提供了对组件的更多控制和自由,而无需向DOM元素添加类 – 因为属性与组件相关联。此外,由于Foundation已经开发了几年,它提供了许多辅助功能。

?优点:

  • 移动优先,响应式网页设计框架
  • 为应用程序和电子邮件提供支持

?缺点:

  • 大型依赖大小,如Bootstrap
  • 大量的功能可能会压倒初学者

Bootstrap与Foundation之间的功能没有太大变化,选择任何一个平台时都不会失去太多。话虽这么说,如果你想要更多地控制你的项目,你应该和基金会一起去。

布尔玛(bulma.io) 布尔玛vs.

Bulma是一个基于Flexbox的开源轻量级CSS框架。

虽然不是Bootstrap的水平,Bulma是GitHub上一个相当受欢迎的项目,拥有超过35,000颗星。

Bulma旨在提供移动优先的响应式框架,并进一步关注模块化。

要在项目中使用Bulma,您必须执行以下步骤:

  • 添加HTML5文档类型
  • 为响应式视口添加元标记
  • 在头标记中包含Bulma CSS文件
  • (可选)添加fontawesome脚本以使用图标

这是一个模板:

回到关于Bootstrap vs Foundation vs Bulma的辩论,Bulma有一个更温和的学习曲线。 Bulma与Bootstrap和Foundation之间的显着差异是CSS的唯一关注点,框架中没有任何JavaScript元素。 JavaScript的排除使框架也变得轻量级。在可访问性方面,Bulma只是部分可访问,尽管社区正在定期添加支持。

?优点:

  • 轻量级,基于flexbox的框架
  • 模块化元件可实现灵活性

?缺点:

  • 没有JavaScript元素
  • 对可访问性的有限支持

作为开发人员,如果您希望使用可帮助您为Web创建响应元素的轻量级框架,则应选择Bulma。如果您遇到困难,该框架可以为您提供相当大的支持。

语义(semantic-ui.com) 语义与

Semantic是一个CSS框架,旨在创建直观的用户界面。

该框架使用明显的类名来帮助简化学习过程。 Semantic中的类受英语语言的启发,将逻辑概念与类名联系起来。

要在项目中使用语义组件,您需要完成以下步骤:

  • 包括HTML5文档类型
  • 加载语义CSS文件
  • 在调用任何JavaScript元素之前包含jQuery
  • 包括Semantic的脚本

这是一个模板:

为了比较Semantic与Bootstrap vs Foundation以及其他,你会注意到尽管有直观的命名约定,Semantic在学习的复杂性方面也不尽如人意。文档很广泛,但需要一些时间来习惯。与Angular和React等JavaScript框架集成很好,这使得它非常适合在涉及使用这些框架的应用程序中使用。

?优点:

  • 直观的类名
  • 与JavaScript框架集成

?缺点:

  • 可能无法满足大型项目的需要
  • 社区的有限支持

语义是一个相对容易学习的框架,也支持JavaScript框架。如果您的要求涉及使用JavaScript,那么您应该考虑在下一个项目中使用此框架。

UIkit(getuikit.com) uikit vs

UIkit是一个现代的轻量级框架,非常强调模块化以创建Web界面。

它是一个相对较新的开源框架,在GitHub上有大约15k的星星。 UIkit可帮助您创建响应式设计,并在BrowserStack上自动连续部署。

要在项目中使用UIkit组件,您需要完成以下步骤:

  • 包括HTML5文档类型
  • 加载UIkit CSS文件
  • 包含UIkit的功能和图标脚本

这是一个模板:

如果我们将它与Bootstrap vs Foundation和Bulma进行比较,那么UIkit有很多功能。尽管有JavaScript元素,但UIkit并不依赖于jQuery,这使得最终用户的负载更小。对于在敏捷开发环境中快速迭代Web应用程序的版本,它肯定与这些框架并驾齐驱。

?优点:

  • 专注于模块化,使其易于使用
  • 元素是可定制的,从而带来灵活性

?缺点:

  • 有限的文档和社区支持

虽然UIkit在控制结构和功能方面给你很多自由,但它是相当新的,如果你遇到框架问题,这会导致在线支持有限。因此,只有当您的前端编程技能足够先进时,才应该在项目中考虑此框架。

转到顶部Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit:最后的想法

总结一下我们在顶级CSS框架的比较中所讨论的内容:

  • 如果你想要一个有很多支持的无障碍解决方案,请选择Bootstrap
  • 要获得组件的更多自由,请尝试使用Foundation
  • 为了确保项目的轻量级添加,请尝试使用Bulma或UIkit
  • 如果您的Web应用程序使用繁重的JavaScript框架,则应选择Semantic

你在2019年使用哪个CSS框架?请在下面的评论中告诉我们!

不要忘记加入我们的速成课程,以加快您的WordPress网站。通过一些简单的修复,您可以将加载时间减少50-80%:

Karol K的布局,演示和编辑。

相关文章