【前端UI框架】Bootstrap、Foundation、Semantic UI、Pure和UIkit的对比说明

原文地址:

https://www.sunjs.com/article/detail/6ec78db2139a468d933c40ed38322ecf.html

现在有大量的CSS前端框架可用。但真正好的屈指可数。本文将比较五个最佳前端框架，每个框架都有自己的长处和短处，以及特定的应用领域，使你可以根据特定项目的需求进行选择。例如，如果项目很简单，则不需要使用复杂的框架。此外，许多选项都是模块化的，只允许使用你需要的组件，甚至可以混合来自不同前端框架的组件。

1.Bootstrap

Bootstrap是当前可用前端框架中无可争议的NO.1。鉴于其巨大的知名度，每天仍在不断增长，可以肯定，这个奇妙的工具不会让你失望。

创作者：Mark Otto and Jacob Thornton.

发布时间：2011年

当前版本：4.0

人气：GitHub上有122825颗星

描述：“简洁，直观且功能强大的前端框架，可实现更快、更轻松的网页开发。”

核心概念/原则：RWD和移动优先。

框架大小：578 KB（预编译的zip文件夹）

预处理器：Sass

响应：是的

模块化：是的

启动模板/布局：是的

图标集：不包括

附加功能/附加组件：没有捆绑，但有许多第三方插件可用。

独特的组件（与下面前端框架相比较）：Jumbotron，Card

文档：非常好

定制：为网格系统和重启提供独立文件选项，使用Sass轻松定制；没有在线定制器

浏览器支持：最新版本的Firefox，Chrome，Safari，IE810-11-Microsoft Edge。

许可证：MIT

Bootstrap的注意事项

Bootstrap的主要优势在于其广受欢迎。从技术上讲，它不一定比其他的框架好，但与其他四个前端框架相比较，它提供了更多的资源（文章和教程，第三方插件和扩展，主题构建器等）。总之，Bootstrap无处不在。这是程序员继续选择它的主要原因。

2.Foundation

Foundation是顶部前端框架的第二大玩家。有了像ZURB这样坚实的后盾，这个框架有了一个真正强大的基础。毕竟，Foundation在包括Facebook，Mozilla，易趣，雅虎在内的许多大型网站上使用，还有国家地理等等。

创作者：ZURB

发布时间：2011年

当前版本：6

人气：GitHub上有27130颗星

描述：“先进的响应式前端框架”

核心概念/原则：RWD，移动优先，语义

框架大小：197.5 KB

预处理器：Sass

响应：是的

模块化：是的

启动模板/布局：是的

图标集：基础图标字体

附加功能/附加组件：是的

独特的组件：Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables

文档：很好，有很多额外的资源可用。

定制：基本的GUI定制器

浏览器支持：Chrome，Firefox，Safari，IE9 +; iOS，Android，Windows Phone 7+

许可证：MIT

Foundation注意事项

Foundation是一个真正专业的前端框架，提供商业支持，培训和咨询服务。它还提供了许多资源，可帮助你更快，更轻松地学习和使用框架。

3.Semantic UI

Semantic UI是使构建网站更加语义化的框架。它利用自然语言原理，从而使代码更具可读性和可理解性。

创作者：Jack Lukic

发布：2013

当前版本：2.3

人气：GitHub上有40134颗星

描述：“基于自然语言有益原则的UI组件框架”

核心概念/原则：语义，tag ambivalence，可响应

框架大小：806 KB

预处理器：少

响应：是的

模块化：是的

开始模板/布局：是的，提供了一些基本的初学者模板

图标集：Font Awesome

附加功能/附加组件：否

独特的组件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape

文档：非常好，提供组织良好的文档，另外还有一个单独的网站，提供入门指南，自定义和创建主题

定制：没有GUI定制器，只有手动定制

浏览器支持：Firefox，Chrome，Safari，IE10 +（IE9仅支持浏览器前缀），Android 4，Blackberry 10

许可证：MIT

关于Semantic UI的注意事项

Semantic是极具创新性和功能全面的前端框架。其框架的总体结构、类中清晰逻辑的命名约定方式和语义方面也超过了其它框架。

4.Pure

Pure是一个轻量级的模块化框架，用纯CSS编写，包含可根据需要一起使用或分开使用的组件。

创作者：雅虎

发布：2013

当前版本：1.0.0

人气：GitHub上有18375颗星

说明：“一套小而灵活的CSS模块，能够在每个Web项目中使用。”

核心概念/原则：SMACSS，极简主义

框架大小：3.8 KB缩小和gzipped

预处理器：无

响应：是的

模块化：是的

启动模板/布局：是的

图标集：无；可以改用Font Awesome

附加功能/附加组件：无

独特的组件：无

文档：很好

定制：基本的GUI皮肤生成器

浏览器支持：Firefox，Chrome，Safari的最新版本; IE7 +; iOS 6.x，7.x; Android 4.x

许可证：Yahoo! Inc. BSD

关于Pure的注意事项

Pure只为你的项目提供纯粹的开始式样。对于那些不需要全功能框架，但只有特定组件才能包含在其工作中的用户来说，它是理想之选。

5.UIkit

UIkit是一个易于使用且易于定制的组件的简明集合。虽然它不如以上框架那么受欢迎，但它提供了相同的功能和质量。

创建者：YOOtheme

发布：2013

当前版本：3.0.0

人气：GitHub上有11954颗星

描述：“用于开发快速而强大的Web界面的轻量级和模块化前端框架”

核心概念/原则：RWD，首先移动

框架大小：326.9 KB（压缩文件夹）

预处理器：少，Sass

响应：是的

模块化：是的

启动模板/布局：是的

图标集：UIkit带有自己的SVG图标系统和库，其中包含越来越多的轮廓图标

附加功能/附加组件：是的

独特的组件：文章，Flex, Cover, HTML编辑器

文档：很好

自定义：高级GUI定制程序仅在版本2（以前的版本）中可用

浏览器支持：Chrome，Firefox，Safari，IE9 +

许可证：MIT

关于UIkit的注意事项

UIkit已成功用于许多WordPress主题。它提供了一个灵活而强大的手动定制机制。（该框架的早期版本还提供了高级GUI定制工具。）