>

二零一六年5个最流行前端框架相比较,最受迎接

- 编辑:至尊游戏网站 -

二零一六年5个最流行前端框架相比较,最受迎接

2015年5个最盛行前端框架相比

2015/01/08 · CSS, HTML5 · bootstrap, Foundation, Pure, Semantic UI, UIkit, 前端框架

本文由 伯乐在线 - kinolee 翻译,JustinWu 校稿。未经许可,禁止转发!
罗马尼亚(罗曼ia)语出处:www.sitepoint.com。招待加入翻译组。

现行一代众多CSS的前端框架纷涌而至,但真正的精粹的却聊胜于无。

在这篇小说中大家将对自己觉着最佳的三个框架进行相比,每种框架皆有温馨优劣点和特定的应用领域,那允许你依据特定项目标须求选用安妥的框架。例如,假若您的连串比较轻易,你就不须求复杂的框架,别的,大多挑选是模块化的,那允许你仅使用你须求的零件,只怕夹杂使用不相同框架的组件。

咱俩要研究的框架都以依赖其在github上的名气呈现的,首先说最风靡的,当然是:Bootstrap。

(注意:上面包车型客车一些消息在将来的几周和几月后就过时了,如:GitHub 上的评分(Stars)和本子数,因而黄金年代旦您是在此篇小说发表相当久以往阅读的话,你须求小心那或多或少。别的,还要小心框架大小是或不是将供给的CSS和JS文件最小化。)

小编选择的这几个框架是依照它们在 Github 的受接待程度来的,而最受应接的明显是 Bootstrap。

1. Bootstrap

Bootstrap 在前些天风靡的各样框架中是一清二楚的百般。鉴于其每一日仍在加强的壮烈人气,能够没有什么可争辨的,那么些卓绝的工具相对不会让你失望,它也不会在您成功组建网址前就离开到别处。

图片 1

  • 创建者: Mark Otto and Jacob Thornton.
  • 发布: 2011
  • 脚下版本: 3.3.1
  • 人气: 在Github上有75,000+ stars
  • 描述: “Bootstrap是最风靡的的 HTML, CSS和 JavaScript 响应式开辟框架 ,web上开采的首先个移动项目.”
  • 基本概念/原则: RWD 和平运动动优先
  • 框架大小: 145 KB
  • 预管理器: Less 和 Sass
  • 响应式: Yes
  • 模块化: Yes
  • 起初模板/布局: Yes
  • Logo设置: Glyphicons Halflings set
  • 附加/插件: 未有捆绑插件,但为数不菲第三方插件可用.
  • 非同一般的零部件: Jumbotron
  • 文档: 良好
  • 定制: 基本的GUI定制器。不幸的是,你需求手动输入的水彩值,因为从没可用的水彩选取器。
  • 浏览器扶助: Firefox, Chrome, Safari, IE8+ (你需要 Respond.js for IE8)
  • 许可证: MIT

Notes on Bootstrap

  •  Bootstrap 的要害优点是它相当火。从才能上讲,它并不一定比此次列出来的此外框架好,但它提供的资源(小说和课程、第三方插件和强盛、大旨开采者等等)比此外多少个框架的总额还要多。简单来说,Bootstrap无处不在。那是大家一而再选拔它的关键缘由。
  • (注意:“独特的机件”的意味是,相比这里提到的任何框架是绝世的。)

1.Bootstrap中文网(Boostrap英文网)

Bootstrap 是最受迎接的 HTML、CSS 和 JS 框架,用于开拓响应式布局、移动设备优先的 WEB 项目

图片 2

* 作者:Mark Otto and Jacob Thornton

* 发表时间: 贰零壹叁

* 当前版本: 3.3.7

* 遍布程序: 在 Github 上获得 111,000 个点赞

* 描述: “Bootstrap 是最受接待的 HTML、CSS 和 JavaScript 框架,用于支付响应式、移动优先的 Web 应用”

* 主旨概念:索罗德WD 以致活动优先

* 框架体量: 154 KB

* 预处理器:Less and Sass

* 响应式: Yes

* 模块化: Yes

* 支持模板和布局?: Yes

* 图标集:Glyphicons Halflings set

* 插件/扩张: 未有绑定,可是不少第三方的能够挑选

* 独特的组件: Jumbotron

* 文档: Good

* 定制: 基本的 GUI 定制工具,不行的是您须要手工输入颜色值,因为尚未提供颜色拾取器

* 浏览器协理: Firefox, Chrome, Safari, IE8+ (IE 8 需求 Respond.js )

* 许可证:MIT

2. Foundation by ZURB

Foundation是那多少个框架中第二大的,在像ZURB一样实力雄厚的市肆支持下,这一个框架确实很刚劲,是的,正是foundation。毕竟, Foundation已经在无尽重型网址上投入使用,满含 Twitter(推特), Mozilla, Ebay, Yahoo!和国度地理等等。

图片 3

  • 创建者: ZURB
  • 发布: 2011
  • 眼下版本:5.4.7
  • 人气: 在Github上有18,000+ stars
  • 描述: “世界上最美貌的响应式前端框架”
  • 宗旨概念/原则: RWD 、手提式有线电话机优先、语义的
  • 框架大小: 326KB
  • 预管理器: Sass
  • 响应式: Yes
  • 模块化: Yes
  • 开班模板/布局: Yes
  • 图标设置: Foundation Icon Fonts
  • 附加/插件: yes
  • 特别的机件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
  • 文档: 优良,还应该有相当多附加的财富是可用的。
  • 定制: 未有GUI编辑器,只好手工业定制。
  • 浏览器扶助: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
  • 许可证: MIT

2.Foundation

Foundation 在这里份列表中是第二公投项。该框架有多个真正有力、况兼很棒的基本功。其他,有好多大网址在行使该框架,满含:Twitter, Mozilla, Ebay, Yahoo! 以致国家地理杂志等等。

图片 4

* 所属: ZURB

* 公布时间: 二零一一

* 当前时刻:6.3.1

* 受招待程度: 在 Github 收获 25,400 个点赞

* 描述: “最高端的响应式前端框架”

* 核心概念: 奇骏WD, 移动优先,语义化

* 框架体量: 197.5 KB

* 预管理器: Sass

* 响应式: Yes

* 模块化: Yes

* 模板/布局: Yes

* 图标集:Foundation Icon Fonts

* 插件/扩展: Yes

* 独特组件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables

* 文书档案: 好,提供数不完外加能源

* 定制: 基本的 GUI 定制器,类似 Bootstrap 那款

* 浏览器扶助: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+

* 许可证: MIT

Notes on Foundation

Foundation 是二个提供业务支撑、培养练习和咨询真正标准的框架。它还提供了过多财富帮忙您更快和更便于学习和应用框架。

3.Semantic UI

Semantic UI 从来在时时随地升华,营造更具语义的 Web 网址。其采纳自然语言原则,使得代码越发具备可读性和易于精晓。Semantic UI是最具立异以致全职能的框架。框架的完全结构和命名都有肯定的逻辑和语义,在此地点碾压别的框架。

图片 5

* 作者:Jack Lukic

* 公布时间: 二零一三

* 当前版本: 2.2

* 受应接程度: 在 Github 上获得 34,762 个赞

* 项目描述: “贰个 UI 组件框架,基于自然语言特点”

* 宗旨概念: 语义、标签、响应式

* 框架谈到: 806 KB

* 预处理器: Less

* 响应式: Yes

* 模块化: Yes

* 模板布局: 援助,提供部分基础模板

* 图标集: Font Awesome

* 扩展、插件: No

* 独特组件: Divider, Flag, Rail, Reveal, Step, Advertisement, 卡德, Feed, Item, Statistic, Dimmer, Rating, Shape.

* 文书档案: 非常的厉害,组织卓绝,提供入门、定制和宗旨成立.

* 定制: 不提供 GUI 定制器,唯有手工业定制

* 浏览器支持: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10

* 许可证: MIT

3. Semantic UI

Semantic UI 经过长年累月的拼命,致力于能够以更语义化的点子创设网址。它使用自然语言的口径,使代码更可读,更便于通晓。

图片 6

  • 创建者: Jack Lukic
  • 发布:2013
  • 时下版本:1.2.0
  • 人气: 在Github上有12,900+ stars
  • 描述: “基于自然语言有效标准的UI组件框架”
  • 主旨概念/原则: 语义,标签的冲突性、响应式
  • 框架大小: 552KB
  • 预管理器: Less
  • 响应式: Yes
  • 模块化: Yes
  • 开头模板/布局: No
  • Logo设置: Font Awesome
  • 附加/插件: yes
  • 独特的零部件: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
  • 文档: 相当好。Semantic提供了二个很好的团伙文书档案,还应该有四个提供入门指南,定制和开创核心单独的网址,。
  • 定制: 没有GUI定制器,只可以手工业定制。
  • 浏览器支持:Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
  • 许可证: MIT

4.Pure

Pure 是一个轻量级、模块化的框架,使用纯 CSS 编写,其包含的持有组件都足以在联合或然独立选择。

图片 7

* 所属: Yahoo

* 发表时间: 二零一二

* 当前版本: 0.6.2

* 受迎接程度: 在 Github 收获 16,637 个点赞

*  描述: “如日中天组小的、响应式的 CSS 模块,能够用于任蒸蒸日上 Web 项目”

* 主旨概念:SMACSS, 极简主义.

* 框架聊起: 16 KB

* 预管理器: None

* 响应式: Yes

* 模块化: Yes

* 模板/布局: Yes

* 图标集结: 无,你能够动用 Font Awesome .

* 插件/扩展: None

* 独特组件: None

* 文档: 好

* 定制: 基本的 GUI 四肢创设器

* 浏览器扶助: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x

* 许可证:Yahoo! Inc. BSD

Notes on Semantic UI

塞马ntic 是此处斟酌的最创新和机能最全面包车型大巴框架。在框架的完好结会谈命名约定方面,也以显然的逻辑和语义类超过了别的框架。

5.UIkit

图片 8

UIkit 是二个轻易使用和定制的简要组件会集。纵然与其竞争对手比较,受迎接程度没那么高,可是它黄金年代律提供了千篇少年老成律的功用和品质。

* 所属:YOOtheme

* 公布时间: 二〇一三

* 当前版本: 3.0.0

* 受招待程度: 在 Github 收获 9,422 个点赞

* 描述: “三个轻量级模块化的前端框架,用于快速支付强盛的 Web 分界面”

* 宗旨概念: 奥迪Q5WD, 移动优先

* 框架提及: 326.9 KB (384.4 KB 假诺含有 uikit-icons.min.js 和有关 SVG Logo时)

* 预管理器: Less, Sass

* 响应式: Yes

* 模块化: Yes

* 模板/布局: Yes

* Logo集: UIkit 满含自个儿的 SVG Logo系统和库

* 插件/扩展: Yes

* 独特组件: 阿特icle, Flex, Cover, HTML Editor

* 文档: Good

* 定制: 高端 GUI 定制器,只在本子 2 中提供

* 浏览器援救: Chrome, Firefox, Safari, IE9+

* 许可证: MIT

4. Pure by Yahoo!

Pure是贰个轻量级的、模块化的框架,以纯CSS编写,它总结广大零件,你可以依据要求共同或单独运用它们。

图片 9

  • **创建者:  Yahoo**
  • 发布: 2013
  • 前段时间版本: 0.5.0
  • 人气: 在Github上有9,900+ stars
  • 描述: “您能够在每三个web项目中动用的龙精虎猛组小的和响应式的CSS模块”
  • 主导概念/原则:SMACSS,极简的.
  • 框架大小: 18 KB
  • 预管理器:  None
  • 响应式: Yes
  • 模块化: Yes
  • 最初进轨范板/布局: Yes
  • Logo设置: 未有,能够利用Font Awesome代替
  • 附加/插件: None
  • 独特的机件:None
  • 文档: 良好
  • 定制: 基本的GUI定制器。
  • 浏览器支持:Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
  • 许可证: MIT

 6.Milligram

图片 10

Milligram 提供了极简样式设置,便于你快速、简洁的拉开建站之旅。即使它不是贰个 UI 框架,但它的规划思想却是以提供精美的属性、高效的支付功效以至起码的品质重新恢复设置而创设的。同不时间,它也是轻量的,在 Gzip 压缩后,它只有 2KB 大小。

7.AmazeUI

图片 11

Notes on Pure

Pure只提供贰个骨干的风格,让你的项目有两个根本的启幕。对于工作中无需一个全职能的框架只须要有一定的零部件的人来讲是最美貌的。

5. UIkit by YOOtheme

UIkit 是三个精简的框架,它轻便使用,易于定制组件。纵然它不像任何竞争对手同样受应接,但它提供了平等的功效和质量。

图片 12

  • 创建者:   YOOtheme
  • 发布: 2013
  • 近些日子版本: 2.13.1
  • 人气: 在Github上有3,800+ stars
  • 描述: “多个轻量级的和模块化的前端框架,用于快捷支付和功用强盛的web接口。”
  • 主干概念/原则:HavalWD, 手提式有线电话机优先.
  • 框架大小:  118 KB
  • 预管理器:  Less, Sass
  • 响应式: Yes
  • 模块化: Yes
  • 发端模板/布局: Yes
  • Logo设置: Font Awesome
  • 附加/插件: Yes
  • 卓殊的零件: Article, Flex, Cover, HTML Editor
  • 文档: 良好
  • 定制: 优秀的GUI定制器。
  • 浏览器补助: Chrome, Firefox, Safari, IE9+
  • 许可证: MIT

Notes on UIkit

UIkit已经打响的在数不清WordPress 主旨上行使,它提供了一个灵活、强大的定制化学工业机械制,也能够经过GUI定制器举行手动操作。

哪贰个框架更符合您?

末段,在挑选适用的框架方面,让自家给您有的观点,这里有局地关键的作业供给小心:

  • 本条框架有充裕的人气吗?越来越大的普遍意味着更加多的人涉足那些类型,因而,会有越来越多来自社区的课程和小说,更多真实的案例/网址,更加的多第三方扩展,与有关web开荒产品更加好地组成。庞大的人气也代表框架不太会过时,毕竟三个有所宏大群众体育使用的框架是不太可能被扬弃的。
  • 这一个框架还在不停积极开辟吗?三个好的框架是亟需整合新型的网络手艺不断提拔的,非常是有关移动方面包车型地铁技能。
  • 那么些框架已经成熟了吗?借使四个框架尚未在实质上项目和测量检验中利用,那么你能够随性所欲玩,但依靠它做专门的学问项目就不太明智了。
  • 本条框架提供不错的文书档案吗?优良的文书档案总是能为你的读书进度提供便民。
  • 这一个框架的特异性程度有多高?这里的要点是,相比较四个别具一格程度高的框架,使用多少个更通用的框架要轻巧得多。在大部动静下,最佳选用一个非常小风格的框架,因为它更易于定制。相比重写或隐讳现成的中规中矩,加多新的CSS准则是更有利和火速的流水生产线。别的,要是您在现存框架的尾部加多新准则,那么你将大概会留给一些不被选用的准则,那将追加不需求的CSS文件的深浅。

终极,倘让你照旧不鲜明,能够采纳混合着搭配格局。借使三个一定的框架不满意你的内需,您能够从五个或多个以上的品种来勾兑组件。举个例子,你能够从一个框架获得比较小的CSS样式基础从另二个框架获得二个优异的栅格系统,再从第一个框架得到更复杂的机件。模块化万岁!:)

您的主见是哪些啊?那个框架有怎么着长处和缺欠是这里未有关联的呢?你认为还或然有此外主题素材是理所应当被列出来的吧?在下边包车型地铁斟酌中得以让大家深知。

赞 4 收藏 评论

至于我:kinolee

图片 13

果壳网搜狐:@木冬虫夏草 个人主页 · 笔者的稿子 · 12

图片 14

本文由技术教程发布,转载请注明来源:二零一六年5个最流行前端框架相比较,最受迎接