文档章节

最流行的5个前端框架对比

葡萄城技术团队
 葡萄城技术团队
发布于 2017/06/26 11:48
字数 2209
阅读 9301
收藏 385

如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。

本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件。

本文依据各个框架的GitHub流行度来顺序介绍。

Bootstrap

Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长,你可以放心的选择这个框架,而不必担心项目会失败,因为具有广泛使用基础的框架,不太可能被抛弃。

  • 创作者: Mark Otto 和 Jacob Thornton.
  • 发行: 2011
  • 当前版本: 3.3.7
  • 人气: GitHub上有111,000颗星
  • 说明: “Bootstrap是最流行的HTML,CSS和JavaScript框架,用于在网络上开发响应式、移动的Web项目。
  • 核心概念/原则: RWD和移动端优先。
  • 框架大小: 154 KB
  • 预处理器: LessSass
  • 响应式布局:是
  • 模块化:是
  • 启动模板/布局:是
  • 图标集: Glyphicons Halflings设置
  • 附加/附件:无捆绑,许多第三方插件可用。
  • 独特组件: Jumbotron
  • 文档资源:良好
  • 自定制:基本GUI定制器。但是你需要手动输入颜色值,因为没有颜色选择器可用。
  • 浏览器支持: Firefox,Chrome,Safari,IE8 +(您需要IE8的Respond.js
  • 许可证: MIT

Bootstrap说明

Bootstrap的广泛流行是它的优势所在。在技​​术上,它不一定比列表中的其它框架更好,但它提供了比其它四个框架更多的资源(文章和教程、第三方插件和扩展、主题构建器等)。简而言之,Bootstrap 无处不在,这是人们继续选择的主要原因。

 

Foundation

Foundation是排在第二名的框架。ZURB这样坚实的公司一直支持着Foundation,所以这个框架有强大的基础。Foundation现已用于许多大型网站,包括Facebook,Mozilla,Ebay,Yahoo!和国家地理等。

  • 创作者: ZURB
  • 发行: 2011
  • 当前版本: 6.3.1
  • 人气: GitHub上有25,400颗星
  • 说明: “世界上最先进的响应式前端框架”
  • 核心概念/原则: RWD,移动端优先,语义。
  • 框架大小: 197.5 KB
  • 预处理器: Sass
  • 响应式布局:是
  • 模块化:是
  • 启动模板/布局:是
  • 图标集: 基础图标字体
  • 额外/附加组件:是
  • 独特的组件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
  • 文档资源:良好,还有许多额外资源。
  • 自定制:基本的GUI定制程序,类似于Bootstrap定制工具。
  • 浏览器支持: Chrome,Firefox,Safari,IE9 +; iOS,Android,Windows Phone 7+
  • 许可证:MIT

Foundation说明

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

 

Semantic UI

Semantic UI是一个语义化设计的前端开源框架。它利用自然语言原理,从而使代码更加可读和可理解。

  • 创作者: Jack Lukic
  • 发行: 2013
  • 当前版本: 2.2
  • 人气: GitHub上有34,762颗星
  • 说明: “基于自然语言原则的UI组件框架”。
  • 核心概念/原则:Semantic, tag ambivalence, responsive。
  • 框架大小: 806 KB
  • 预处理器:少
  • 响应式布局:是
  • 模块化:是
  • 启动模板/布局:是,并提供了一些基本的入门模板
  • 图标集: Font Awesome
  • 额外/附加组件:否
  • 独特的部件:Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。
  • 文档资源:非常好,Semantic提供了一个非常有组织的文档,另外还有一个单独的网站提供入门指南、自定义和创建主题。
  • 自定义:没有GUI定制器,只有手动定制。
  • 浏览器支持: Firefox,Chrome,Safari,IE10 +(仅IE9浏览器前缀),Android 4,Blackberry 10
  • 许可证:MIT

Semantic UI说明

Semantic是这里所讨论的所有框架中,最具创新性和全功能的框架。其框架的总体结构、类中清晰逻辑的命名约定方式和语义方面也超过了其它框架。

 

Pure

Pure是一种轻量级的模块化框架,采用纯CSS编写,具有可根据需要一起使用或单独使用的组件。

  • 创作者:雅虎
  • 发行: 2013
  • 当前版本: 0.6.2
  • 流行度: GitHub上有16,637颗星
  • 说明: “一套小而灵活的CSS模块,能够在每个Web项目中使用。”
  • 核心概念/原则: SMACSS,极简主义。
  • 框架大小: 16 KB
  • 预处理:无
  • 响应式布局:是
  • 模块化:是
  • 启动模板/布局:是
  • 图标集:无。可以改用Font Awesome。
  • 额外/附加组件:无
  • 独特组件:无
  • 文档资源:很好
  • 自定义:基本GUI皮肤生成器
  • 浏览器支持:最新版本的Firefox,Chrome,Safari; IE7 +; iOS 6.x,7.x; Android 4.x
  • 许可证: Yahoo! Inc. BSD

Pure说明

Pure为你的项目提供了一个干净的开始,只提供基本框架。对于不需要全功能框架但仅包含在其工作中的特定组件的人来说,pures是一个理想的选择。

 

UIkit

UIkit是一个易于使用和自定义的组件的简洁集合。虽然它不像其它框架那样受欢迎,但它提供了相同的功能和质量。

  • 创造者: YOOtheme
  • 发行: 2013
  • 当前版本: 3.0.0
  • 人气:GitHub GitHub上有9,422颗星
  • 说明: “用于开发快速而强大的Web界面的轻量级和模块化的前端框架”。
  • 核心概念/原则: RWD,移动端优先
  • 框架大小: 326.9 KB(如果包含uikit-icons.min.js与SVG图标相关的功能,则为384.4 KB )
  • 预处理器:少,Sass
  • 响应式布局:是
  • 模块化:是
  • 启动模板/布局:是
  • 图标集: UIkit自带SVG图标系统和类库,其中包含越来越多的大纲图标。
  • 额外/附加组件:是
  • 独特的组件:Article, Flex, Cover, HTML Editor
  • 文件:好
  • 自定义:高级GUI定制程序仅在版本2(以前的版本)中可用
  • 浏览器支持: Chrome,Firefox,Safari,IE9 +
  • 许可证:MIT

UIkit说明

UIkit成功应用在许多WordPress主题中。它提供了灵活和强大的手动定制机制(以前版本的框架还提供了高级GUI定制程序)。

 

什么是最适合你的框架?

在选择框架时,可以从以下几个方面考虑:

  • 所选的框架有足够的人气吗?更多的人气意味着更多的人参与项目,也意味着有更多的教程和社区文章、更多的实例和网站、更多的第三方扩展、更好的相关的Web产品可与其集成。受欢迎程度也意味着框架更具前瞻性,因为具有更大社区的框架不太可能被抛弃。
  • 框架是否正在积极发展?一个好的框架需要不断地使用最新的web技术,特别是在移动端方面。
  • 框架是否达到成熟?如果一个特定的框架在现实项目中还没有被使用和测试,那么将其用于你的专业项目,可能不是一个明智的选择。
  • 框架是否提供了良好的文档?为了方便学习过程,总是需要良好的文档。
  • 框架的特异性是什么?这里的要点是,与具有高级别特异性的框架相比,更通用的框架更容易使用。在大多数情况下,最好选择一个应用最小样式的框架,因为它更容易自定义。与重写现有的CSS规则相比,添加新的CSS规则是一个更方便有效的做法。

如果你还不确定使用哪个框架,那么可以采用混合搭配的方式。当某个特定的框架不能满足你的需求时,可以混合使用两个或多个项目的组件。

最后值得一提的是,现在Flexbox和Grid Layout在主流浏览器的最新版本中得到很好的支持,比以往任何时候都更容易构建复杂的布局。这可能会鼓励更多的开发人员放弃前端框架,从头开始编写他们自己想要的布局。

前端开发工具介绍:

Wijmo是一款用TypeScript编写的新一代JavaScript/HTML5控件集。在全球率先支持AngularJS,并提供性能卓越、零依赖的FlexGrid表格控件和图表等多个控件,是构建企业应用程序的全套控件集。

原文链接:https://www.sitepoint.com/5-most-popular-frontend-frameworks-compared/

转载请注明出自:葡萄城控件

© 著作权归作者所有

共有 人打赏支持
葡萄城技术团队

葡萄城技术团队

粉丝 364
博文 506
码字总数 736540
作品 17
西安
高级程序员
私信 提问
加载中

评论(19)

qwfys
qwfys
bookmark this page
incess
incess
说了半天都只是UI框架,楼主对概念理解得不好
robortly
robortly
不错
小杨阿哥哥
小杨阿哥哥
bootstrap玩好了都不得了!
钞票欠多

引用来自“haitaosoft”的评论

前端框架===CSS前端框架?
false
钞票欠多
标题党
开源中国首席罗纳尔多
开源中国首席罗纳尔多
还有哪些好看的CSS框架推荐一下,移动端和PC端的
每周精粹
每周精粹
只能说是ui框架
极品渣子
极品渣子
就喜欢pure这种简单的。
haitaosoft
haitaosoft
前端框架===CSS前端框架?
Num60 (p2p项目简介,环境搭建,angularjs)

p2p项目简介: P2P是peer-to-peer的缩写,即个人对个人,又称点对点网络借贷 。P2P直接将人们联系起来,让人们通过互联网直接交互。使得网络上的沟通变得容易、更直接共享和交互,真正地消除...

萧小蚁
2016/06/26
118
0
南京微沐软件科技有限公司/jfinal-seckill

JFinal+Vue 实现秒杀系统示例 项目说明 根据慕课网Java高并发秒杀系列教程: Java高并发秒杀API之业务分析与DAO层 Java高并发秒杀API之Service层 Java高并发秒杀API之web层 Java高并发秒杀API...

南京微沐软件科技有限公司
2016/09/28
0
0
a466350665/smart

Smart QQ交流群:454343484(提供开发工具和文档下载) 简述 Smart定位用当下最流行的SSM(SpringMVC + Spring + Mybatis)技术,为您构建一个易理解、高可用、高扩展性的单点登录权限管理应用...

a466350665
2017/08/09
0
0
2016最热门的PHP框架

每个PHP框架都拥有各自独特的地方。同时PHP语言已经获得了巨大的认同并且成为了世界上最通用的服务器脚本语言。PHP也俨然成为了最容易学习的web动态开发语言。在PHP发展的同时,PHP框架也迅速...

丶辉
2016/08/19
100
0
(一)构建dubbo分布式平台-平台导语简介

导语: 怎么搭建一套满足企业未来发展的通用架构平台?现在分布式、微服务、云平台的口号是如此的响亮,技术更新是如此的迅速,很多架构师选择使用dubbo、spring cloud的方案去帮助企业搭建分...

park
2017/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
30分钟前
1
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
4
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部