Bootstrap,Foundation,Bulma,Semantic,UIkit

在过去的几年中,最终用户的浏览习惯已经演变为包括各种设备。因此,响应式网页设计对于当今开发的每个网站都是必不可少的。但是,为每个项目从头开始创建响应式设计可能很耗时。一个使您的生活更轻松的出色解决方案是使用CSS框架。这样的框架会为您处理基本的响应式设计原则。在此比较中,我们看了一些最佳的CSS框架,然后看看哪个是最佳的. 这是Bootstrap,Foundation,Bulma,Semantic,UIkit.


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

Bootstrap,Foundation,Bulma,Semantic,UIkit

在本文的最后,您将了解每个框架的主要功能和局限性,并且可以更好地确定其中最适合您的需求。让我们开始吧:

  • 引导程序编号
  • 基金会编号
  • 布尔玛#
  • 语义编号
  • UIkit#

引导程序 (getbootstrap.com)

引导vs

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

Bootstrap最初于2011年在Twitter上开发,但最终演变为一个独立的项目。当前的稳定版本是4.3。目前正在开发中的Bootstrap 5将用香草JS代替jQuery的使用,放弃对过时的浏览器的支持并更改当前的测试平台.

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

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

这是一个入门模板.




在本教程中,我们将为这些框架使用CDN托管的资源版本(CSS和JS文件)。这是一个快速入门 指南 在引导程序上.

除了健壮的“移动优先”方法外,框架的成熟还为社区提供了大量支持。此外,Bootstrap会维护 批准的框架和套件 供您选择,第三方开发人员还提供了Bootstrap的工具包和软件包,它们可以同样轻松地与您的项目集成。这是我们为Bootstrap挑选的免费UI套件。除了首先移动,还支持触摸屏。由于Bootstrap是一个成熟的项目,因此它支持许多辅助功能.

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

s优点:

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

��缺点

  • 依赖项较大(〜300KB)
  • 对jQuery的依赖使某些组件可以工作

如果您正在寻找具有良好支持基础的稳定平台,那么Bootstrap应该是您的首选。如果您不想过多地使用默认组件,则这是正确的选择。对于那些想要在敏捷环境中快速迭代解决方案的人来说,Bootstrap是完美的选择.

基础 (foundation.zurb.com)

基础vs

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

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

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

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

这是一个快速入门模板:

$(document).foundation();

你可以下载 定制版本 适合您需求的Foundation框架.

当我们尝试将Bootstrap与Foundation进行比较时,会遇到一些问题。 Bootstrap提供了来自社区的更多支持,使用起来更容易一些,并且当您被注视时,可以选择多种主题。另一方面,Foundation使您对组件具有更多控制和自由,而无需向DOM元素添加类-因为属性与组件相关联。此外,由于基金会已经发展了几年,所以它 提供许多辅助功能.

s优点:

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

��缺点

  • 较大的依赖项大小,例如Bootstrap
  • 大量功能可能使初学者不知所措

Bootstrap与Foundation之间的功能变化不大,选择任何一个平台都不会造成太大损失。话虽如此,如果您想对项目进行更多控制,则应该与Foundation一起使用.

您可能也对这些文章感兴趣:

  • 最佳Angular管理员仪表板模板

布尔玛 (bulma.io)

布尔马vs

Bulma是基于Flexbox的开源,轻量级CSS框架.

虽然Bulma还不及Bootstrap级别,但它在GitHub上是一个相当受欢迎的项目,拥有超过35,000星.

Bulma设计为移动优先,响应框架,并特别关注模块化.

为了在您的项目中使用布尔玛,您必须遵循以下步骤:

  • 添加HTML5文档类型
  • 为响应式视口添加元标记
  • 在您的head标签中包含Bulma CSS文件
  • [可选]添加fontawesome脚本以使用图标

这是一个模板:

回到关于Bootstrap,Foundation和Bulma的辩论中,Bulma的学习曲线更加平缓。 Bulma在Bootstrap和Foundation方面的一个显着差异是仅关注CSS,而框架中没有任何JavaScript元素。排除JavaScript也使该框架轻巧。在可访问性方面,布尔玛仅部分可访问,尽管社区会定期添加支持.

s优点:

  • 轻量级的基于Flexbox的框架
  • 模块化元素带来灵活性

��缺点

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

作为开发人员,如果您想使用可帮助您为Web创建响应元素的轻量级框架,则应选择Bulma。如果您陷于该过程中,该框架会提供大量支持,以帮助您.

语义的 (semantic-ui.com)

语义与

语义是一个CSS框架,旨在创建直观的用户界面.

该框架使用明显的类名来帮助简化学习过程。语义班受到英语的启发,将逻辑概念与班级名称联系起来.

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

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

这是一个模板:

为了将语义与Bootstrap与Foundation以及其他语义进行比较,您会注意到,尽管具有直观的命名约定,语义在学习的复杂性方面还是不足的。该文档内容丰富,但需要一段时间才能习惯。与Angular和React之类的JavaScript框架集成很好,这使其非常适合在涉及使用这些框架的应用程序中使用.

s优点:

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

��缺点

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

语义是具有相对容易学习曲线的框架,并且也支持JavaScript框架。如果您的需求涉及JavaScript的使用,则一定要在下一个项目中考虑使用此框架.

UIkit (getuikit.com)

uikit vs

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

这是一个相对较新的开放源代码框架,在GitHub上约有1.5万颗星。 UIkit通过在BrowserStack上进行自动连续部署来帮助您创建响应式设计.

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

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

这是一个模板:

如果将UIkit与Bootstrap,Foundation和Bulma进行比较,则UIkit具有许多功能。尽管有JavaScript元素,但UIkit并不依赖jQuery,这使得最终用户的有效负载更小。在敏捷开发环境中快速迭代Web应用程序的版本方面,它与这些框架并驾齐驱.

s优点:

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

��缺点

  • 有限的文档和社区支持

虽然UIkit在结构和功能的控制方面给了您很多自由,但是它是一个相当新的东西,如果您遇到框架问题,这将导致在线支持有限。因此,仅当您的前端编程技能足够高级时,才应在项目中考虑此框架.

Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit:最终想法

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

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

您在2020年使用哪种CSS框架?请在下面的评论中告诉我们!

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

布局,演示和编辑,Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map