10大html5前端框架

Bootstrap

首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心,来让自己成长。结果受到周围各 种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才,但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美,所以这也是我最初选择 Bootstrap 的原因之一,它让我做出来的东西好歹能在妹子面前装个逼,不过时间长了难免觉得 Bootstrap 美的让人烦躁, 但好在它的每个版本都会有很大的改变,不会让人觉得自己做的网站会跟很多网站撞脸。Bootstrap 的用法及其简单( 这也可能就是 Bootstrap 作者阅攻城士无数,了解他们痛的结果 ),以至于是个小前端都可以快速上手,几乎没什么学习成本。

官网:http://getbootstrap.com/

Github:https://github.com/twbs/bootstrap/

作者:Mark Otto 和Jacob Thornton Star:93,112

总结:Bootstrap 最大的优势就是它非常流行,流行就代表你有问题就有很多人帮你解决问题,就代表装逼它就是利器,还有就是界面比较和谐,容易上手,关注它的童鞋应该发现最 新 V4 版也开始支持 FlexBox 布局,这是非常好的升级体验。 劣势是 class 命名不够语义化,并且各种缩写,以至于我离了文档就是个菜,最近开始整混合 APP,选框架的时候首选就是它,但之前搞 PC 一直没注意,后来搞混合右键属性看它的时候,瞬间一阵凉风袭来,Bootstrap 好小,小到我只好选择别的框架。

AUI

第三个是最近刚起来的AUI,虽然作者声称是专为APICloud开发者设计的一套UI框架,但实际它还是解决了很多移动前端开发的普遍问题,是主 要面向混合开发的 CSS 框架。看起来作者比较猖狂,各种高级 CSS3 遍地使用,这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组件,解决了很多 复杂的让我骂娘的布局,现在可以直接拿走就用。

Github:https://github.com/liulangnan/aui

官网:http://www.auicss.com/

作者:流浪男 Star:92

总结:这个框架对我来说有个优点就是纯 CSS 框架,自己以前也就用过 Pure,自己有点 JS 能力,如果不是复杂的效果,找个纯 CSS 框架自己随便改改就可以,而现在 CSS3 也已经能够做到动画,效率、质量、高效全兼顾,所以还是选择了这种 CSS 框架。有一点觉得不满的是这框架的文档真的好那什么,说好的高大上呢。

Amaze UI

第二个介绍的是妹子UI,最初使用它是因为本尊遇到了一个爱纠结细节设计士,有一次她跟我的字体较上真了,结果一句顶万句的 BOOS 夸了她,我只好根据她的想法去解决,结果最后找到了Amaze UI 框架( 我不介意你叫我懒淫 ),按照官方的话说就是 "基于社区开源项目构建的一个跨屏前端框架,以移动优先,从小屏到大屏,最终实现所有屏幕适配,适应移动互联潮流" 。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。

官网:http://amazeui.org/

Github:https://github.com/amazeui/amazeui

所属公司:云适配 Star:6710

总结:Amaze UI 总的来说就是加入更多符合中国市场特性的元素,框架对跨屏、适配都做了的比较好的处理并且准备一了一系列的常用的网页组 件,为减少搞兼容、适配各种敲键盘的加班狗们的工作时间做了不小的贡献。,框架还对中文排版优化,兼容中国本土主流浏览器、轻量化,不仅适用于桌面端,还 更更适合移动端、包含一些封装好的Widgets。不过自也就我感觉 Amaze UI 文档是否有点太那什么了,比如 “人们不会在乎jQuery的那 点流量。”,说实的在这真没啥,不过我从来不会说出来( 哈哈 ),代码和设计上感觉没太多突出的点。

Frozen UI

有段时间看到 QQ 瞬间高大上了,后来四处打听,原来 QQ 客服端也用了 混合开发,其中QQ会员前端用的是 Frozen UI,并且这套框架开源,欣喜若狂耐不住心里的寂寞直接上手试了一遍,初体验感觉基础样式效果简单色调清爽,有个比较活跃的社区所以组件什么的也比较丰 富。

Github:https://github.com/frozenui/frozenui

官网:http://frozenui.github.io/

作者: QQVIP FD Team Star:1,067

总结:如果拿 Frozen UI 配合一些如 APICloud 用来做混合 APP 感觉就太酷了,或者原生的火鸡们拿去嵌套在应用中做前端开发,这个框架对 android 2.3 +、ios 4.0 + 做了兼容,或者拿来做 Web App 也是极好的选择,劣势的话从 UI 层面就可以看到了,谁让它是出生在QQ会员前端的呢。

Frozen UI

第三个是Frozen UI,有段时间看到 QQ 瞬间高大上了,后来四处打听,原来 QQ 客服端也用了 HTML 混合开发,其中QQ会员前端 就是用的 Frozen UI,并且这套框架开源,欣喜若狂耐不住心里的寂寞直接上手三下五除二试了一遍就开始试用,初体验的就是基础样式效果简单色调清 爽,有个比较活跃的社区所以组件什么的也比较丰富。

Github:https://github.com/frozenui/frozenui

官网:http://frozenui.github.io/

作者: QQVIP FD Team Star:1,067

总结:如果拿 Frozen UI 配合一些如 APICloud 用来做混合 APP 感觉就太酷了,或者原生的火鸡们拿去嵌套在应用中做前端开 发,并且这个框架对 android 2.3 +、ios 4.0 + 做了兼容,或者拿来做 Web app 也是极好的选择,不过要是放在微信里比这 更合适的 WeUI 框架更是首选了,劣势的话从 UI 层面就可以看到了,谁让它是出生在QQ会员前端的呢。

WeUIi

第四个是WeUI和同 FrozenUI都属于 差不多的 WeUi了,也是一个比较专一的框架,WeUI应该说比FrozenUI前者更专一,话 说连个官网都不搞,所有答疑都在 gitHub Issues 解决了,这个框架极其简单,体积当然就不用说了,模块也就 7 个左右,不过体量虽然小做 的却不错,口碑看 star 就够了,框架从 16/1/23 发版至今 github star 超过 7K,不过也不排除用户没地方发泄所以都跑 到 git 上来,哈哈。

Github:https://github.com/weui/weui

DEMO:http://weui.github.io/weui/

Star:7,129

总结:看完微信设计团队设计的这套 DEMO,二话不说如果要做微信公众,这个二话不说必然是首选了。框架不好的地方简而言之就是框架本身应该就没考虑过让用户用到非微信的场景之下。

SUI

“SUI 是一套基于bootstrap开发的前端组件库,同时它她也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面”。 果然 还是直接引用官方给的枯燥无味广告要节省自己的脑细胞( 囧… ),当然了就像广告说的,如果你之前用过 Bootstrap, 那么可以轻松转 向 SUI,这可能就是淘宝给前端屌丝们的福利了。。 

Github:https://github.com/sdc-alibaba/sui

官网:http://sui.taobao.org/sui/docs/index.html

Star:120

AUI

第六个是最近刚起来的最近刚起来的 AUI,虽然作者声称是专为APICloud开发者设计的一套UI框架,但实际它还是解决了很多移动前端开发的 普遍问题,是它主要面向混合开发的 CSS 框架。,所以看起来作者比较猖狂,各种高级 CSS3 遍地使用,这也使得我不得不去查查这些 个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组 件,解决了很多复杂的让我骂娘的布局,现在可以直接拿走就用。

Github:https://github.com/liulangnan/aui

官网:http://www.auicss.com/

作者:流浪男 Star:92

总结:这个框架对我来说有个优点就是纯 CSS 框架,自己以前也就用过 Pure,自己有点 js 能力,如果不是复杂的效果自己找个 纯 CSS 框架自己随便改改就能达到效果,而现在 CSS3 也已经能够做到各种动画,效率、质量、高效各种一顿考虑所以还是选择了这种 CSS 框 架。而一直觉得不满的是这框架的文档真的好那什么,说好的高大上呢。

MUI

曾经一直使用 Android 系统的我,后来见到 IOS,果断移情别恋了,不知道为什么苹果每次调整系统我都特别喜欢,后来一段时间因为缺设计 我专门模仿 IOS 系统做 UI,但始终不能够做到很好,无意间就发现了 MUI 这个框架,这个框架给我的吸引之处就是它的 UI 是以 IOS 为 主体设计的,当然它也补充了android特有UI样式。并且MUI官方声称用来开发深入以后发现拿它做 APP 还能够提高用户使用流畅度,然后便试着 更深入的了解和使用一段时间。

官网:http://dev.dcloud.net.cn/mui/

Github:https://github.com/dcloudio/mui

Star:2,450

总结:就像之前说的这个框架是以两大系统为参照来封装UI组件,框架自身还有一个较为活跃的社区,不太好的地方这也是我特别关注的一点,关于开发应 用的流畅度,我当然知道这是 H5 目前的劣势,但是看到官网给的描述,还是抱着期待的心理试试看能否提升,然而它其实还是需要是借助 Webview来 提升,而不是框架本身。

Semantic UI

倒数第三个是 Semantic UI,接触这个框架还是因为 Bootstrap,Semantic UI 刚上线 github 就受到大量开发者的关注,以至于很多人拿它俩对比各种挑刺各种夸,是好是坏不能单凭别人三句四句就抬起手指开始赞,用了以后感觉 UI 上跟 Bootstrap 没太多的区别,不过代码命名规范上却相差甚大,本人认为 Semantic UI 是不是就想做的不一样,它的命名全是采用复合的方式,类名特别的离散,用的时候你得很小心自己扩展或者新增的 class 命名与它的类名冲突。

官网:http://www.semantic-ui.cn/

Github:https://github.com/semantic-org/semantic-ui/

 Foundation

Foundation 算是框架界的元老啦,都说框架去的早,而这个框架一直到现在依然这么的热门,如果你比较介意 Bootstrap 开发撞脸的尴尬事情,那么你可以考虑使用 Foundation 。即使你使用预定义的 UI 元素, 也不会与其他网站太像,就像官方说的给开发者更灵活的框架体验。

官网:http://foundation.zurb.com/

Github:https://github.com/zurb/foundation-sites

Star:22,736

UiKit

UIkit是YOOtheme团队开发的,在许多WordPress主题中都有应用(也就是如果你是个 WordPress 爱好者,那么这个框架应该比较适合深究),并且框架能够通过GUI编辑器和手动编辑,所以它提供了一个灵活、强大的自定义机制。框架借助LESS、 jQuery、normalize.css及FontAwesome开源项目的独有特点,整合成了这么一款轻量级、模块化的前端框架。

官网:http://www.getuikit.com/
Github:https://github.com/uikit/uikit
作者:YOOtheme Star:6,372

Pure

终于最后一个了,我和你一样好开森 (~ ̄▽ ̄)~),这个框架是我在做管理系统时接触的,选择使用也是因为框架小巧,并且是纯 CSS,没有太多的牵扯,好用来与其他框架快速结合使用。

官网:http://purecss.io/

Github:https://github.com/yahoo/pure/

Star:13,592

 

转自:http://www.cnblogs.com/huangyin1213/p/5750113.html

转载于:https://www.cnblogs.com/songshu120/p/6905056.html

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

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

相关文章

多媒体技术复习汇总 收藏

多媒体技术复习汇总 收藏 1. 什么是媒体:媒体是信息表示和传输的载体。2. 媒体分类:感觉媒体,表示媒体,表现媒体,存储媒体,传输媒体3. 多媒体技术的定义和特点:多媒体技…

PHP中的语法特点小结

PHP中的语法特点小结 1.PHP的变量开头要加上$符号,见到$就知道这个是一个变量 2.PHP中的常量才是不用加$符号的 3.PHP中$可以用来嵌套使用,从而实现动态的变量名的层级调用 4.PHP程序<?php开头,结尾可以加上?>,也可以不加 5.PHP中的常量有着魔术常量(系统自带的) 6.PH…

滚动行为

new router({ scrollBehavior (to, from, savaPosition) { if(savePosition) { //历史记录的前进后退记住的之前滚动到的位置 return savePosition } else { return {x: 0, y: 0} } //history模式下 定位到某个元素失效的解决办法 if(to.hash) { return { selector: to.h…

使用FFMPEG SDK解码流数据获得YUV数据及其大小

本文以H264视频流为例&#xff0c;讲解解码流数据的步骤。 为突出重点&#xff0c;本文只专注于讨论解码视频流数据&#xff0c;不涉及其它&#xff08;如开发环境的配置等&#xff09;。如果您需要这方面的信息&#xff0c;请和我联系。 准备变量 定义AVCodecContext。如果您…

关于Python3.7和Python3.6中元组类型数据内存存储问题

关于Python3.7和Python3.6中元组类型数据内存存储问题 小编最近发现了一个瑕疵 当定义一个元组类型的变量后,若在程序后面再定义一个元组变量,这两个元组的内容相同,那么在不同的版本中会出现不同的结果 在Python3.6版本中,解释器将在内存中开辟两个内存空间分别存储两个元组的…

shell 删除了hdfs 文件_从零开始学大数据(三) Shell操作HDFS文件系统-中

1、格式化[rootmaster sbin]# hdfs namenode -format2、命令hdfs dfsadmin查看(hdfs dfsadmin -report)[rootmaster ~]# hdfs dfsadmin -report安全模式#获取安全模式状态[rootmaster ~]# hdfs dfsadmin -safemode get#进入安全状态[rootmaster ~]# hdfs dfsadmin -safemode en…

计算机硬件

计算机硬件 一、为什么要学习计算机基础 程序员编程的本质就是让计算机去工作&#xff0c;而编程语言就是程序员与计算机沟通的介质。程序员要想让计算机工作&#xff0c;就要知道计算机能干什么、是怎么样的一个完成过程&#xff0c;这也是我们必须学习计算机基础的原因。 …

当编程作为一种爱好

一、当编程作为一种爱好&#xff0c;时刻关心一段代码如何实现。 二、当把工具操作得足够熟悉&#xff0c;闭眼即能达到代码述写的规范。 三、程序呀&#xff0c;如果爱上你是我的错&#xff0c;我打算一错到底。转载于:https://www.cnblogs.com/spiriter88/p/6913539.html

Python中的函数概述

1.python中函数概述 概念 模块化编程的思想 有组织,可共享(重复使用,实现特定的功能的代码块) 提高程序的可维护性,提高开发效率,提高代码的重用性定义一个函数 1.语法:def 函数名称(形参列表):函数体/代码块return 返回值 2.定义参数介绍 def :关键字 用于函数的定义,函数的…

铁路售票系统_铁路资讯:复兴号动车、智能京张高铁…中国最高端铁路装备看这里...

今天上午&#xff0c;两年一度的中国国际现代化铁路技术装备展在京开展&#xff0c;会期3天&#xff0c;将集中展示路网建设、客货运输、经营管理、工程建造、技术装备、旅客服务等铁路行业各领域的先进产品及技术。展会现场智能京张&#xff1a;将首次实现时速350公里自动驾驶…

H.264的NALU,RTP封包说明(转自牛人)

H.264 RTP payload 格式 H.264 视频 RTP 负载格式 1. 网络抽象层单元类型 (NALU) NALU 头由一个字节组成, 它的语法如下: --------------- |0|1|2|3|4|5|6|7| -------- |F|NRI| Type | --------------- F: 1 个比特.forbidden_zero_bit. 在 H.264 规…

CentOS下安装MySQL报安装文件conflicts错误:

2019独角兽企业重金招聘Python工程师标准>>> 第一&#xff1a;报这个错误&#xff0c;说明已经安装或相关文件已经存在&#xff0c;把已经存在的文件卸载了就可以了&#xff1a; rpm -e --nodeps mysql-libs-5.1.* 转载于:https://my.oschina.net/u/3197158/blog/1…

inc指令是什么意思_西门子PLC一些指令

指令(英文全称意思)∶指令含义1、LD ( Load装载):动合触点2、LDN (Load Not不装载):动断触点3、A(And与动合):用于动合触点串联4、AN (And Not与动断):用于动断触点串联5、o(Or 或动合):用于动合触点并联6、ON(Or Not 或动断):用于动断触点并联7、(Out输出):用于线圈输出8、OLD…

python核心,内建函数,高阶函数

晨测 global和nonlocal区别 写一个递归的阶乘回顾 1.global和nonlocal 关键字 2.函数的递归 1.查找规律 2.设置退出条件 3.性能 3.闭包 外函数中定义一个内函数 外函数的返回值是内函数的引用 内函数引用外函数的变量,未来外函数执行完毕,不会释放被内函数引用变量 4.总结 1.…

对h.264压缩视频码流中i帧的提取(firstime)

这个问题要说清楚还是有点复杂&#xff1a;首先判断 NALU 类型是否是 5&#xff0c;如果是&#xff0c;那么以后连续出现的 NALU 类型为 5 的 NALU 就属于 IDR 帧&#xff08;一种特殊的 I 帧&#xff09;&#xff1b;如果 NALU 不是 5&#xff0c;则要进一步判断 slice_type 是…

hadoop fs 运维常用的几个命令

FS Shell调用文件系统(FS)Shell命令应使用 bin/hadoop fs <args>的形式。 所有的的FS shell命令使用URI路径作为参数。URI格式是scheme://authority/path。对HDFS文件系统&#xff0c;scheme是hdfs&#xff0c;对本地文件系统&#xff0c;scheme是file。其中scheme和auth…

touchesEnded不响应

为什么80%的码农都做不了架构师&#xff1f;>>> http://blog.csdn.net/assholeu/article/details/16363241 touchesEnded不响应主要存在以下几种情况 case 1 : userInteractionEnabled 部分控件如UIImageView&#xff0c;userInteractionEnabled默认为NO&#xff0…

python request对四类参数的处理_如何处理Djang中同一参数具有多个变量的request.GET...

在Django视图中&#xff0c;您可以访问request.GET[variablename]&#xff0c;因此在您的视图中&#xff0c;您可以执行如下操作&#xff1a;myvar request.GET[myvar] 实际的request.GET[myvar]对象类型是&#xff1a; 现在&#xff0c;如果要传递具有相同参数名的多个变量&a…

nonlocal和global关键字

回顾: 1. Python的函数的概述函数定义函数调用2. Python函数中参数的类型和返回值形参和实参形参类型:普通参数: 实参的传递的顺序和个数和形参一直关键字参数: 指定传递的实参被特定形参接收默认参数: 形参中设定当前参数的默认值可以不传递设定了默认参数的实参不定长参数:一…

小波在图像视频压缩领域中的应用分析【转贴】

到目前为止&#xff0c;小波的最多应用一直是数字图像压缩。它们是新JPEG2000数字图像标准的核心。使用小波变换的优势主要有如下几个方面。 1、基于小波变换的方法能有效地保留原始图像的细节和边缘&#xff0c;重建图像时不会造成“振铃”效应。 2、基于小波变换的方法采用…