最实用前端开发框架对比评测

现在,各种开发框架层出不穷,但是,真正的精品却为数不多。今天我们根据Github上的流行程度整理了2014年最受欢迎的5个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。


1. Bootstrap


Bootstrap毫无疑问是现今框架的领导者。他不仅仅流行,每天用户量也在不断增长。你可以相信,这个工具不会让你失望,你也可以单独使用它制作自己的网页。其实慧都控件网也有用Bootstrap,你发现了吗。一般人我不告诉他的~

  • 创建者: Mark Otto and Jacob Thornton.

  • 发布: 2011

  • 当前版本: 3.3.1

  • 流行度: 75,000+ stars on GitHub

  • 描述: “Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.”

  • 核心概念/原理:RWD和 移动优先.

  • 框架大小: 145 KB

  • 预处理器: Less and Sass

  • 响应式: Yes

  • 模块化: Yes

  • 起始模版/轮廓: Yes

  • 图标集: Glyphicons

  • 其他插件: 无绑定, 有其他三方插件.

  • 独特组件: Jumbotron

  • 文档: Good

  • 定制: 基本 GUI 定制.不过需要手动修改,因为无颜色选取工具

  • 浏览器支持: Firefox, Chrome, Safari, IE8+ (IE8需要 Respond.js  )

  • 授权: MIT

2. Foundation by ZURB


与Bootstrap相比,Foundation屈居第二,不过这并不能说明他不受欢迎。 ZURB在后面强有力的支持,使得 Foundation 更加强大。Foundation被各大网站使用,Facebook, Mozilla, Ebay, Yahoo!还有美国国家地理网站,是不是每个网站都是大牛,他们都选择Foundation,这也反映Foundation更牛。

  • 创建者: ZURB

  • 发布: 2011

  • 当前版本: 5.4.7

  • 流行度: 18,000+ stars on GitHub

  • 描述: “The most advanced responsive front-end framework in the world”

  • 核心概念/原理:RWD, mobile first, semantic.

  • 框架大小:326 KB

  • 预处理器: Sass

  • 响应式: Yes

  • 模块化: Yes

  • 启始模版/布局: Yes

  • 图标集: Foundation Icon Fonts

  • 其他组件: Yes

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

  • 文档: Good. 有许多资源可参考.

  • 定制: 无GUI 定制,但可自己写

  • 浏览器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+

  • 授权: MIT

与众不同:对于商务运输、教育培训、咨询等行业Foundation是一个专业框架。他还提供很多资源让你,快速学习。

3、Semantic UI


Semantic UI正在不懈努力让网页制作变得更加Semantic。原生语言规则让代码更易读易懂。

  • 创建者: Jack Lukic

  • 发布: 2013

  • 当前版本: 1.2.0

  • 流行度: 12,900+ stars on GitHub

  • 描述: “A UI component framework based around useful principles from natural language.”

  • 核心概念/原理: Semantic, tag ambivalence, responsive.

  • 框架大小: 552 KB

  • 预处理器: Less

  • 响应式: Yes

  • 模块化: Yes

  • 启始模版/布局: No

  • 图标集: Font Awesome

  • 其他组件: No

  • 独特组件: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.

  • 文档: 非常完善. Semantic 提供多个结构层次的文档,  单独网站 提供给初学者以及其他定制教程等。

  • 定制: 无GUI 定制,但可自己写

与众不同:Semantic可以说今天所讨论的框架中是最创新、功能最全面的框架。整体构架、命名规则,有清晰的逻辑、语义性,超过他框架。

4. Pure by Yahoo!


Pure是一个纯CSS编写,轻量级的、模块化的框架,包含各种整合和独立的组件。

  • 创建者: Yahoo

  • 发布: 2013

  • 当前版本: 0.5.0

  • 流行度: 9,900+ stars on GitHub

  • 描述: “A set of small, responsive CSS modules that you can use in every web project.”

  • 核心概念/原理: SMACSS, minimalism.发布

  • 框架大小: 18 KB

  • 预处理器: None

  • Responsive: Yes

  • 模块化: Yes

  • 启始模版/布局: Yes

  • 图标集: None. 可使用 Font Awesome 替代

  • 其他组件: None

  • 独特组件: None

  • 文档: Good

  • 定制: Basic GUI Skin Builder

  • 浏览器支持: 最新版本:Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x

  • 授权: Yahoo! Inc. BSD

与众不同:Pure为你的项目提供干净的基础框架。对于那些不需要一个全功能的框架,只需要特定的组件的开发者,Pure是一个不错的选择。

5. UIkit by YOOtheme


UIkit 是一个简洁的易于使用和易于定制组件。虽然它不像其竞争对手一样受欢迎,但是它提供了和上面框架相同的功能,质量也很不错。

  • 创建者: YOOtheme

  • 发布: 2013

  • 当前版本: 2.13.1

  • 流行度: 3,800+ stars on GitHub

  • 描述: “A lightweight and modular front-end framework for developing fast and powerful web interfaces.”

  • 核心概念/原理: RWD, mobile first

  • 框架大小: 118 KB

  • 预处理器: Less, Sass

  • 响应式: Yes

  • 模块化: Yes

  • 启始模版/布局: Yes

  • 图标集: Font Awesome

  • 其他组件: Yes

  • 独特组件: Article, Flex, Cover, HTML Editor

  • 文档: Good

  • 定制: 高级 GUI 定制

  • 浏览器支持 : Chrome, Firefox, Safari, IE9+

  • 授权: MIT

与众不同:UIkit在许多WordPress主题中都有应用。通过GUI编辑器和手动编辑,它提供了一个灵活、强大的自定义机制。

什么样的框架适合你?


最后,给出几点建议,希望可以帮助大家选择适合自己的框架。

  • 框架足够流行吗?越是流行说明使用的人越多,各种资源也就越多,可以交流的方式也就越多。被抛弃的几率越小,你可以更加安心使用该框架。

  • 框架是在持续发展吗?好的框架需要不断更新改善,适应当前的各种技术,尤其是移动端。

  • 框架成熟吗?如果,一个框架没有在实际项目中实践,你可以随便拿来练手,但是,如果要用到专门的项目中,还是找比较成熟的框架靠谱。

  • 是否提供完善文档?在学习阶段,一份完善的文档可以帮助我们事半功倍。

  • 特异性程度如何?相比一个特殊的框架,一个通用的框架可以让开发更加简单。大多数情况下,选择最小的样式可以让定制更简便,添加新CSS比覆盖原有样式更加简单易操作且更有效率。

最后,如果你还是不太确定这框架是否适合自己,你可以从不同项目中找出一两个组件放入自己的项目中。如此合成,应该也是有帮助的。



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/272517.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HBase1.0.0 实现数据增删查

HBase1.0.0 即Hadoop 2.6 采用maven 的方式实现HBase数据简单操作 import java.io.IOException; import java.util.ArrayList; import java.util.List; import java.util.Random;import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.Path; import org.a…

linux 写结构体到文件

将整数写入到文件 #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include<stdio.h> #include <unistd.h> #include <string.h>#include <stdlib.h> int main() {int fd;int data100;int data20;fdopen("…

程序员常访问的国外技术交流网站

技术人员经常会在各种技术交流社区游逛&#xff0c;大家互相学习、交流、分享、帮助。互联网拉近了地球人的距离&#xff0c;让全世界的技术人员可以聚集在一起分享交流。当然因为多方面原因&#xff0c;通常最新最权威的技术知识传到国内存在一定“时差”。本文将给大家分享技…

标准C库对文件操作的引入

modeopen和fopen的区别 fopen、fread、fwrite的使用 &#xff08;1&#xff09;fopen FILE *fopen(const char *path, const char *mode);path&#xff1a;文件路径 mode&#xff1a;以什么权限打开&#xff0c;要用双引号 它的返回值并不是文件描述符 若失败返回NULL 若操作成…

转载爱哥自定义View系列--Paint详解

上图是paint中的各种set方法 这些属性大多我们都可以见名知意&#xff0c;很好理解&#xff0c;即便如此&#xff0c;哥还是带大家过一遍逐个剖析其用法&#xff0c;其中会不定穿插各种绘图类比如Canvas、Xfermode、ColorFilter等等的用法。 set(Paint src) 顾名思义为当前画笔…

只有程序员才懂这些黑色幽默!

也是机缘巧合&#xff0c;让我一个之前工作从未接触过程序员的人&#xff0c;现在成天和程序员打交道&#xff0c;要知道&#xff0c;不懂技术&#xff0c;往往他们想和你幽默的搞笑一下&#xff0c;未必能读懂。都说程序员情商低&#xff0c;不爱说话&#xff0c;比较闷骚。可…

tiny4412 linux+qtopia nfs网络文件系统的挂载

1,首先确定uboot启动内核的bootargs参数 Linux-CommandLine root/dev/nfs nfsroot192.168.1.131:/home/tiny4412/rootfs_qtopia_qt4 ip192.168.1.230:192.168.1.131:192.168.1.1:255.255.255.0::eth0:off rootfstypenfs consolettySAC0,115200 init/linuxrc ctp2 skipcaliy uh…

Linux 进程、父进程、子进程

进程和程序的区别 一、 进程是动态的&#xff0c;程序是静态的&#xff1a;程序是有序代码的集合&#xff0c;进程是程序的执行。进程有核心态/用户态。 二、 进程是暂时的&#xff0c;程序是永久的&#xff1b;进程是一个状态变化的过程&#xff0c;程序可以长久保存 三、进…

几款开源富文本编辑器优缺点比较

1、百度UEditor 优点&#xff1a;插件多&#xff0c;基本满足各种需求&#xff0c;类似贴吧中的回复界面。缺点&#xff1a;不再维护&#xff0c;文档极少&#xff0c;使用并不普遍&#xff0c;图片只能上传到本地服务器&#xff0c;如果需要上传到其他服务器需要改动源码&…

C程序的储存空间是如何分配?

可执行程序包括BSS段、数据段、代码段。 在类UNIX系统下可使用size命令查看可执行文件的段大小信息。如size a.out&#xff1a; ~/Desktop/MyC$ size a.outtext data bss dec hex filename1672 600 8 2280 8e8 a.out1.数据段存放已初始化的全…

详细讲解Android的网络通信(HttpUrlConnection和HttpClient)

前言&#xff0c;Android的网络通信的方式有两种&#xff1a;使用Socket或者HTTP&#xff0c;今天这一篇我们详细讲解使用HTTP实现的网络通信&#xff0c;HTTP又包括两种方式编程方式&#xff1a; &#xff08;1&#xff09;HttpUrlConnection&#xff1b; &#xff08;2&#…

常见通信协议HTTP、TCP、UDP的简单介绍

TCP HTTP UDP:都是通信协议&#xff0c;也就是通信时所遵守的规则&#xff0c;只有双方按照这个规则“说话”&#xff0c;对方才能理解或为之服务。TCP HTTP UDP三者的关系:TCP/IP是个协议组&#xff0c;可分为四个层次&#xff1a;网络接口层、网络层、传输层和应用层…

创建进程相关函数

fork函数 pid_t fork(void); fork函数调用成功&#xff0c; 返回两次 在fork函数执行完毕后 如果创建新进程成功&#xff0c;则出现两个进程 一个是子进程&#xff0c;一个是父进程 在子进程中&#xff0c;fork函数返回0 在父进程中&#xff0c;fork返回新创建子进程的进程ID…

实现Windows和Linux之间的文件共享

一、windows 向linux共享文件(这里都是以win10和ubuntu为例)首先&#xff0c;打开网络共享中心。如图1图1打开更改高级共享设置&#xff08;图2&#xff09;图 2选择启用网络发现以及启用文件和打印机共享&#xff0c;然后点击保存更改。接着&#xff0c;选择你要共享的文件夹&…

鸡啄米MFC教程笔记之七:对话框:为控件添加消息处理函数

MFC为对话框和控件等定义了诸多消息&#xff0c;我们对它们操作时会触发消息&#xff0c;这些消息最终由消息处理函数处理。比如我们点击按钮时就会产生BN_CLICKED消息&#xff0c;修改编辑框内容时会产生EN_CHANGE消息等。一般为了让某种操作达到效果&#xff0c;我们只需要实…

进程的退出方式以及僵尸进程和孤儿进程

&#xff08;1&#xff09;正常退出 &#xff08;2&#xff09;异常退出 检查wait和waitpid所返回的终止状态的宏 宏说明WIFEXITED(status)若为正常终止子进程返回的状态&#xff0c;则为真。对于这种情况可执行WEXITSTATUS(status)&#xff0c;取子进程传送给exit、_exit或_…

java中的动态代理----自己手动实现

代码使用了common-io&#xff0c;需要其jar 1 接口 Java代码 public interface Pruduct { void selling(); } 2 书籍类 Java代码 public class Book implements Pruduct { Override public void selling() { try { Thread.sleep(1000…

Code Project精彩系列(1)

ApplicationsCrafting a C# forms Editor From scratchhttp://www.codeproject.com/csharp/SharpFormEditorDemo.asp建立一个类似C#的环境, 实现控件拖拉&#xff0c;属性Packet Capture and Analayzer网络封包截获http://www.codeproject.com/csharp/pacanal.aspA tool to cha…

linux进程---exec族函数(execl, execlp, execv, execvp, )解释和配合fork的使用

exec族函数函数的作用&#xff1a; exec函数族的作用是根据指定的文件名找到可执行文件&#xff0c;并用它来取代调用进程的内容&#xff0c;换句话说&#xff0c;就是在调用进程内部执行一个可执行文件。这里的可执行文件既可以是二进制文件&#xff0c;也可以是任何L…

Code Project精彩系列(2)

Windows FormsFireball Resourcer把各种资源嵌入应用程序资源Window Hiding with C#隐藏窗体, 似乎是其它运行的窗体 JProper Threading in Winforms .NETWindows Forms User Settings in C#使用VS设置设定forms, coolA Pretty Good Splash Screen in C#一个自绘可爱屏幕A curt…