在过去几年中，最终用户的浏览习惯已经发展到包括各种设备。因此，响应式网页设计是当今开发的每个网站的必需品。但是，为每个项目从头开始创建响应式设计可能非常耗时。让您的生活更轻松的一个很好的解决方案是使用CSS框架。这样的框架为您提供基本的响应式设计原则。在这个比较中，我们看看一些最好的CSS框架，看看哪个是最好的。这是Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit。
本文将指导您为下一个项目选择合适的CSS框架。我假设您具有前端技术和响应式Web设计原则的基本知识。每个CSS框架都经过测试，涵盖了Bootstrap vs Foundation和Bulma vs Semantic vs UIkit的各个方面。我介绍了每个框架的起源及其主要特征。我还为您提供了每个框架的快速入门指南。
在本文的最后，您将了解每个框架的主要功能和限制，并能够更好地确定哪些框架最适合您的需求。让我们开始吧：
- 引导＃
- 基础＃
- 布尔玛＃
- 语义＃
- UIkit＃
- 最后的想法 ＃
Bootstrap（getbootstrap.com） 
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） 
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） 
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是一个现代的轻量级框架，非常强调模块化以创建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的布局，演示和编辑。