推荐几个精致的web UI框架及常用前端UI框架

淡淡的烟草味﹌ 2021-09-14 03:30 460阅读 0赞

# 以下是几个精致的web UI框架 #

###### 1.Aliceui ######

Aliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。

gitHub地址：[https://github.com/aliceui/aliceui.github.io][https_github.com_aliceui_aliceui.github.io]

###### 2.Amazeui ######

Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。

![20170825091501490][]

官网地址：[http://amazeui.org/][http_amazeui.org]

###### 3.sui ######

SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。   
通过SUI，可以非常方便的设计和实现精美的页面。

官网地址：[http://sui.taobao.org/][http_sui.taobao.org]

同时sui还有移动端版本msui，msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。

地址：[http://m.sui.taobao.org/][http_m.sui.taobao.org]

###### 4.FrozeUI ######

Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。

![20170825091737360][]

官网地址：[http://frozenui.github.io/][http_frozenui.github.io]

###### 5.uiKit ######

uiKit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。

![20170825091820604][]

官网地址：[http://www.getuikit.net/][http_www.getuikit.net]

###### 6.H-ui ######

H-ui是轻量级前端框架，简单免费，兼容性好，适用于中国网站。

![20170825091901800][]

官网地址：[http://www.h-ui.net/][http_www.h-ui.net]

###### 7.Weui ######

weUI 是一套同[微信][Link 1]原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

官网地址：[https://github.com/weui/weui][https_github.com_weui_weui]

###### 8.layui ######

Layui 诞生于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。

![20170825091956481][]

官网地址：[http://www.layui.com/][http_www.layui.com]

###### 9.YDUI Touch ######

YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高;使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局;实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换 px;自定义[JavaScript][]组件、Less文件、Less变量，定制一份属于自己的YDUI;

![20170825092053308][]

官网地址：[http://www.ydui.org/][http_www.ydui.org]

## 10、后台UI开发框架 MuseUI ##

一款基于bootstrap风格，兼容于主流浏览器（包括IE6）的后端UI开发组件。

![20170825090835260][]

官方网站：[http://www.muse-ui.org/\#/index][http_www.muse-ui.org_index]

###### 10.Flat UI - 扁平风格 UI 工具包 ######

Flat UI是一套精美的扁平风格 UI 工具包，基于 Twitter Bootstrap 实现。这套界面工具包含许多基本的和复杂的 UI 部件，例如按钮，输入框，组合按钮，复选框，单选按钮，标签，菜单，进度条和滑块，导航元素等等。

![20170825093418299][]

官方网站：[http://www.bootcss.com/p/flat-ui/][http_www.bootcss.com_p_flat-ui]

**以下是**[常用前端UI框架快速开发web项目][UI_web]

**1.DWZ  国产的[jQuery][] UI富客户端框架**

![20160413224147749][]

框架地址：[http://jui.org/][http_jui.org]

**2.[jQuery][] LingerUI  国产前端框架**

![20160413224403376][]

框架地址：[http://www.ligerui.com/][http_www.ligerui.com]

**3.[jquery][jQuery] EasyUI  帮助你快速构建web应用的前端框架**

![20160413225346029][]

框架中文地址：[http://www.jeasyui.net/][http_www.jeasyui.net]

框架英文地址：[http://www.jeasyui.com/][http_www.jeasyui.com]

**4.bootstrap  这个就不多说了，目前应用最为广泛的UI框架，组件样式都非常丰富**

![20160413225825446][]

框架地址：[http://www.bootcss.com/][http_www.bootcss.com]

**5.BUI  感觉做的还是不错**

![20160413230352401][]

框架地址：[http://www.builive.com/][http_www.builive.com]

**6.拼图  优秀的国产响应式css开源框架，自动适应手机，平板，电脑**

![20160414090858189][]

框架地址：[http://www.pintuer.com/][http_www.pintuer.com]

## 7、Alloy UI – 功能强大的[CSS UI框架][CSS UI] ##

Alloy UI是基于YUI 3的前段UI框架，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，[日历控件][Link 2]，工具条等。

![20170825091148694][]

官方网站：[http://alloyui.com/][http_alloyui.com]

**8.Cardinal – 移动端的CSS UI框架**

Cardinal 是一个小型的移动优先的 CSS 框架，提供很多有用的默认样式、可缩放排版、可重用模块和一个简单的响应式表格系统。

![20170825092840535][]

官方网站：[http://cardinalcss.com/][http_cardinalcss.com]

**9.网易CSS框架 NEC**

NEC是网易推出的开源前端CSS框架，NEC提供了丰富UI代码库和插件，可以极大的帮助开发人员提高开发效率。即使你并非前端专业开发人员，利用NEC你也可以快速地构建属于自己的网页应用。

![20170825093043048][]

官方网站：[http://nec.netease.com/][http_nec.netease.com]

[https_github.com_aliceui_aliceui.github.io]: https://github.com/aliceui/aliceui.github.io
[20170825091501490]: /images/20210813/de046290e40a43128ea5f4a38f338a6f.png
[http_amazeui.org]: http://amazeui.org/
[http_sui.taobao.org]: http://sui.taobao.org/
[http_m.sui.taobao.org]: http://m.sui.taobao.org/
[20170825091737360]: /images/20210813/a21dfc8dbebc43fa92a1467745f2710c.png
[http_frozenui.github.io]: http://frozenui.github.io/
[20170825091820604]: /images/20210813/3611441190b54937bb3199d31d58640f.png
[http_www.getuikit.net]: http://www.getuikit.net/
[20170825091901800]: /images/20210813/514aaa0bb935485b899c494d97decc40.png
[http_www.h-ui.net]: http://www.h-ui.net/
[Link 1]: http://lib.csdn.net/base/wechat
[https_github.com_weui_weui]: https://github.com/weui/weui
[20170825091956481]: /images/20210813/de629bcff524468ab3c92ffd1527df91.png
[http_www.layui.com]: http://www.layui.com/
[JavaScript]: http://lib.csdn.net/base/javascript
[20170825092053308]: /images/20210813/ad9cb84769f34f41a1256f9844c0778b.png
[http_www.ydui.org]: http://www.ydui.org/
[20170825090835260]: /images/20210813/e4780a9690de4bda93a49afedf996f1a.png
[http_www.muse-ui.org_index]: http://www.muse-ui.org/#/index
[20170825093418299]: /images/20210813/6da5b3ea14804da6a4e7236a24a20213.png
[http_www.bootcss.com_p_flat-ui]: http://www.bootcss.com/p/flat-ui/
[UI_web]: http://blog.csdn.net/lsx991947534/article/details/51147533
[jQuery]: http://lib.csdn.net/base/jquery
[20160413224147749]: /images/20210813/085596bc14cb4f66ac307ae9fbadd4b2.png
[http_jui.org]: http://jui.org/
[20160413224403376]: /images/20210813/994e58fd811c493d8f0a94f1267c6d79.png
[http_www.ligerui.com]: http://www.ligerui.com/
[20160413225346029]: /images/20210813/a3bb0eb393c24d93be20c8395e399581.png
[http_www.jeasyui.net]: http://www.jeasyui.net/
[http_www.jeasyui.com]: http://www.jeasyui.com/
[20160413225825446]: /images/20210813/3c8034c7c03b4025b0955053cfce7689.png
[http_www.bootcss.com]: http://www.bootcss.com/
[20160413230352401]: /images/20210813/a8163e2826724f499cc1c571694c32fa.png
[http_www.builive.com]: http://www.builive.com/
[20160414090858189]: /images/20210813/f7ce605bf23945b2a14a5878ec20c48e.png
[http_www.pintuer.com]: http://www.pintuer.com/
[CSS UI]: http://www.codeceo.com/article/top-10-css-ui-framework.html
[Link 2]: http://www.codeceo.com/article/9-datepicker-and-calendar.html
[20170825091148694]: /images/20210813/3583379abcee4e0f9fdf561c8189fd0d.png
[http_alloyui.com]: http://alloyui.com/
[20170825092840535]: /images/20210813/4fad81e674fa4d79af5f26c02d352f02.png
[http_cardinalcss.com]: http://cardinalcss.com/
[20170825093043048]: /images/20210813/949f2cb56c10446690e8da28f7908dbd.png
[http_nec.netease.com]: http://nec.netease.com/