快捷搜索:  汽车  科技

移动端前端ui框架(前端UI框架小汇总)

移动端前端ui框架(前端UI框架小汇总)组件库:    基于vueMint UI(饿了么团队)中文官网:http://mint-ui.github.io/#!/zh-cn描述:基于vue的移动端UI框架

前言:

近期,小弟根据GitHub、前端社区、掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总【不分先后】)。希望对寻找UI框架的小伙伴们提供点帮助。

以下对前端UI框架的移动端、PC端和混合APP的应用进行了列举。

移动端UI框架

Mint UI(饿了么团队)

中文官网:http://mint-ui.github.io/#!/zh-cn

描述:基于vue的移动端UI框架

基于vue

组件库:    

移动端前端ui框架(前端UI框架小汇总)(1)

GitHub地址:https://github.com/ElemeFE/mint-ui/

star:8705,fork:1810

latest commit 2017.12.6 6pm

32 contributors

预览:

http://elemefe.github.io/mint-ui/#/

基础引入:

CDN:

<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入组件库 --><script src="https://img.aigexing.comhttps://unpkg.com/mint-ui/lib/index.js"></script>

npm:

npm i mint-ui -S

观点:可按需加载组件

SUI Mobile(阿里巴巴共享业务事业部UED团队)

官网:http://m.sui.taobao.org/

描述:一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,

并且能兼容到 iOS 6.0 和 Android 4.0 ,非常适合开发跨平台Web App。

基于zepto

IOS风格

预览:

http://m.sui.taobao.org/demos/

组件库:

移动端前端ui框架(前端UI框架小汇总)(2)

GitHub地址:https://github.com/sdc-alibaba/SUI-Mobile

star:5242,fork:1466

lastest commit 2016.11.10 11am

14 contributors

基础引入:

CDN:

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"><script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script><script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>

Weui(微信官方设计团队)

描述:WeUI 为微信 Web 服务量身设计 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。

包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

GitHub地址:https://github.com/weui/weui

star:16804 fork:4683

latest commit 2017.11.2 8pm

20 contributors

预览:

UI组件

https://weui.io

JS组件

https://github.com/weui/weui

基础引入:

CDN:

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"><script type="text/javascript" src="https://img.aigexing.comhttps://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>

npm:

npm install --save weui

YDUI Touch

官网:http://www.ydui.org/

描述:一只注重审美,且性能高效的移动端&微信UI。

基于jQuery

兼容性:

兼容绝大多数移动端设备(兼容Android4.0 、IOS6.0 );

采用 flexbox 布局,因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性,YDUI 将采取其他解决方案;

基础引入:

download:

引入YDUI样式:ydui.css

引入YDUI自适应解决方案类库:ydui.flexible.js

引入jQuery2.0

引入YDUI脚本:ydui.js

组件库:

移动端前端ui框架(前端UI框架小汇总)(3)

预览:

http://m.ydui.org

GitHub地址:https://github.com/ydcss/ydui

star:420,fork:117

latest commit 2017.10.23 2pm

1 contributors

个人观点:自定义keyBoard插件为亮点

GMU(百度GMU小组开发)

描述:基于zepto的轻量级mobile UI组件库,符合jquery ui使用规范,提供webapp、pad端简单易用的UI组件。

兼容iOS3 / android2.1 ,支持国内主流移动端浏览器,如safari chrome UC qq等。

GitHub地址:https://github.com/fex-team/GMU

star:1106 fork:461

latest commit 2017.4.18 2pm

8 contributors

基础引入:

download

引入reset.css:https://github.com/fex-team/GMU/blob/master/dist/reset.css

引入gmu.css:https://github.com/fex-team/GMU/blob/master/dist/gmu.css

引入zepto.js:https://github.com/fex-team/GMU/blob/master/dist/zepto.js

引入gmu.js:https://github.com/fex-team/GMU/blob/master/dist/gmu.js

FrozenUI(QQVIP FD团队• Alloyteam团队)

官方地址:http://frozenui.github.io/

描述:简单易用,轻量快捷,为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。

兼容android 2.3 ,ios 4.0 。

GitHub地址:https://github.com/frozenui/frozenui

star:2330,fork:645

latest commit 2017.11.30

7 contributors

观点:JS组件库相对简洁

移动优先

Foundation

中文官网:http://www.foundcss.com/

描述:Foundation是国外最流行的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

GitHub地址:https://github.com/zurb/foundation-sites

star:26751,fork:5751

latest commit 2017.10.5 7am

955 contributors

基础引入:  

CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" /><script src="https://img.aigexing.comhttps://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>

观点:无很多中文官方文档,不便于中国开发者

Amaze UI

官方地址:http://amazeui.org/

描述:中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版,根据用户代理调整字体,

实现更好的中文排版效果。

基于jQuery

GitHub:https://github.com/amazeui/amazeui

star:10949 fork:2397

latest commit 2017.3.4 8pm

24 contributors

组件库:

移动端前端ui框架(前端UI框架小汇总)(4)

基础引入:

CDN:

移动端前端ui框架(前端UI框架小汇总)(5)

猜您喜欢: