前端——实用UI组件库

发布时间：2020-12-14 23:58:36 所属栏目：资源来源：网络整理

导读：Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件官网：https://valor-software.com/ngx-bootstrap/#/ github: https://github.com/valor-software/ngx-bootstrap NG-bootstrap bootstrap4组件官网：https://ng-bootstrap.github.io/#/home NG-ZORRO 0

Angular UI 组件

ngx-bootstrap

是一套Bootstrap 组件

官网：https://valor-software.com/ngx-bootstrap/#/

github: https://github.com/valor-software/ngx-bootstrap

NG-bootstrap

bootstrap4组件

官网：https://ng-bootstrap.github.io/#/home

NG-ZORRO

0.5，0.6两个版本分别支持angular4.x和5.x

https://ng.ant.design/#/docs/angular/introduce，

NG-alain

https://cipchk.github.io/ng-alain/#/dashboard/v1

github: https://github.com/cipchk/ng-alain

NGX-admin

http://akveo.com/ngx-admin/#/pages/dashboard

primeng

一个丰富的组件库，并且有不同的主题可供选择

https://www.primefaces.org/primeng/#/setup

https://www.primefaces.org/serenity/

Vue组建库：

iView:

https://www.iviewui.com/docs/guide/introduce

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

ElementUI （饿了么团队）：

http://element-cn.eleme.io/#/zh-CN/component/quickstart

提供Vue,Angular,React不同版本，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库

https://element-angular.faas.ele.me/guide/install

https://eleme.github.io/element-react/#/zh-CN/quick-start

Mint UI （饿了么团队）

中文官网：

描述：基于 Vue.js 的组件库，可按需加载组件

预览：

Cube-ui (滴滴内部组件库)

中文官网：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

描述：cube-ui 是基于 Vue.js 实现的精致移动端组件库。

Vue-ydui ( 的一个Vue2.x实现版本，专为移动端打造)

http://vue.ydui.org/

一只基于的 -YDUI Touch

React组件：

Zent

Zent ( ?zent ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件

https://www.youzanyun.com/zanui/zent/zh/guides/install

移动端框架

官网：描述：一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。基于zeptoIOS风格

预览：

基础引入：　　　　CDN:

Weui（微信官方设计团队）

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

预览：　　UI组件：

JS组件：

基础引入：　　　　CDN：

href=>

npm：　　　　　　npm install --save weui

YDUI Touch

官网：描述：一只注重审美，且性能高效的。专属于，采用布局，用来做响应式开发，自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。基于兼容性：　　兼容绝大多数移动端设备（兼容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

预览：

GitHub地址：

GMU（百度GMU小组开发）

http://cloudajs.org/ui/brand/gmu

描述：基于的轻量级mobile UI组件库，符合jquery ui使用规范，提供webapp、pad端简单易用的UI组件。兼容iOS3+ / android2.1+，支持国内主流移动端浏览器，如safari,chrome,UC,qq等。GitHub地址：

基础引入：　　　　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

官方地址：　　描述：FrozenJS 是针对移动端开发的 js 组件库，其依赖 .js 和。简单易用，轻量快捷，为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。兼容android 2.3 +，ios 4.0 + 。　　GitHub地址：

Foundation

中文官网：描述：Foundation是国外最流行的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。GitHub地址：

基础引入：　　　　　　CDN:

href= integrity= crossorigin= />

Amaze UI

　　官方地址：　　描述：中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果。

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。　　基于jQuery　　GitHub：

定位 </tr>
<tr>
<td>jQuery</td>
<td>React</td>
</tr>
<tr>

<td>Less</td>
<td>Sass</td>
</tr>
<tr>

<td>基于 float，12 列响应式</td>
<td>基于 flexbox，6 列流式</td>
</tr>
<tr>

<td>

兼容主流桌面、移动浏览器（WebView）

有限支持 IE8

</td>
<td>

完整支持实现的浏览器（WebView），如 Android 4.4+、IE Mobile 11+、iOS 7.1+

Grid 和 NavBar 对按 09 版 flexbox 实现的浏览器（WebView）支持有待进一步测试

</td>
</tr>
<tr>

<td><a href="https://github.com/amazeui" target="_blank">Amaze UI@GitHub</td>
<td><a href="https://github.com/amazeui/amazeui-touch" target="_blank">Amaze UI Touch@GitHub</td>
</tr>
<tr>

<td>Amaze UI React- 共用 CSS，使用 React 实现交互</td>
<td class="am-disabled">N/A</td>
</tr>
<tr>

<td>

响应式或移动网站

熟悉 jQuery

兼容性要求较广

更适合后端渲染架构

</td>
<td>

针对手机端开发

能够驾驭 React 及相关配套技术

浏览器（WebView）支持 flexbox，如 iOS、腾讯 TBS 2.0 内核的微信 WebView

可用于 SPA 架构

</td>
</tr>
</table>
基础引入：　　　　CDN:
http: http: http: http: http: http: http: http:
Pure
　　中文官网：　　描述：纯CSS　　美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。　　GitHub：
基础引入：　　　　CDN:
href= integrity= crossorigin=>
PC 端 UI框架
SUI（阿里巴巴国际UED团队-商家业务事业部）
　　官网地址：　　描述：一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。　　基于jquery
GitHub：
基础引入：　　　　CDN:
rel=>
H-ui
　　官方地址：　　描述：轻量级前端框架，简单免费，兼容性好，服务中国网站。　　基于jQuery　　GitHub地址：
layui
官方地址：描述：更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。　　layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。经典模块化前端框架
GitHub：
基础引入：　　　　layui.css　　　　layui.js
uiKit（YOOtheme 团队）
官网地址：描述：一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中，所有JavaScript 都会失效。　　依赖jQuery
GitHub地址：
基础引入：　　　　CDN:
href= />
Bootstrap
　　中文官网：　　描述：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
基础引入：　　　　CDN：
href= integrity= crossorigin=>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

npm:　　　　　　npm install bootstrap@3　　其他基于bootstrap衍生出来的模块：　　　　Ace Admin后台管理系统模板：基于bootstrap3；　　　　Metronic后台管理模板：　　　　H+:　　　　jQuery UI+Bootstrap：
jQuery UI
　　官方网址：
其他基于jQuery衍生出来的模板：　　　　BUI：基于jQuery+KISSY UI:　　　　EasyUI:：　　　　　　描述：使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。　　　　DWZ JUI:
混合开发 UI框架
OnsenUI
　　官网地址：　　描述：用来构建混合APP的 HTML5 UI 框架,提供各种版本　　GitHub地址：
ionic
　　基于　　描述：ionic是一个强大的 HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)。ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。ionic是一个轻量的，具有速度快，界面现代化、美观等特点。
Framework7
　　官网地址：　　描述：Framework7 是一个开源免费的HTML框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。　　也可以用来作为原型开发工具，可以迅速创建一个应用的原型。　　Framework7 并不能兼容所有的设备。她只专注于为设计提供最好的体验。Framework7 是一个针对iOS7的框架。从一开始，她就考虑到如何最方便快捷地实现iOS7上各种惊艳的UI组件，以及复杂的动画和灵活的触摸交互。所以Framework7是你实现像素级精度的iOS7应用的最佳选择。　　GitHub：
APP 框架（拓展）
react-native
　　中文官网地址：　　描述：React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once,write anywhere)　　GitHub地址：
　　官网地址：　　描述：Weex 提供强大的跨平台能力，可以使用相同的 API 开发 Web，Android 和 iOS 应用。同时，我们对接口了丰富的扩展能力。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Amaze UI Web

JS 基础库 CSS 预处理 Grid 兼容性项目地址衍生版本适用场景

相关内容

web-server – web服务器根目录应该放在linux中的哪个位置？
Web移动端Fixed布局的解决方案
单元测试 – 将模拟DOM事件传递给没有jQuery的指令处理程序
domain-name-system – 如何将IP请求转发到特定端口
微信小程序TodoList使用教程
jQuery表单验证功能实例
叮点跑腿小程序部署教程
jQuery背景图片全尺寸拉伸
部署 – 如何将clojure Web应用程序部署到Amazon EC2(AWS E
html – 标签内的文字 – 语义正确与否？

推荐文章

站长推荐

用WijmoJS玩转您的Web应用 —— Angular6
TeX to html转换器
没有Web浏览器的Soundcloud API身份验证
html – XSLT按属性值排序
JQuery设置文本框和密码框得到焦点时的样式
sublimetext2 – Sublime text word_separator C
html – favicon.ico没有出现在任何地方
html – 触发：悬停在移动元素上而不移动鼠标
微信小程序里自动获得当前手机所在的经纬度并转换
html – IE11中的正常流程中没有删除绝对定位的f

热点阅读

【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同

前端——实用UI组件库

Angular UI 组件

ngx-bootstrap

NG-bootstrap

NG-ZORRO

NG-alain

NGX-admin

primeng

Vue组建库：

iView:

ElementUI （ 饿了么团队）：

Mint UI （饿了么团队）

Cube-ui (滴滴内部组件库)

Vue-ydui ( 的一个Vue2.x实现版本，专为移动端打造)

React组件：

Zent

移动端框架

官网：描述：一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。基于zeptoIOS风格 预览： 基础引入： CDN:

Weui（微信官方设计团队）

YDUI Touch

GMU（百度GMU小组开发）

FrozenUI（QQVIP

Foundation

Amaze UI

Pure

PC 端 UI框架

SUI（阿里巴巴国际UED团队-商家业务事业部）

H-ui

layui

uiKit（YOOtheme 团队）

Bootstrap

jQuery UI

混合开发 UI框架

OnsenUI

ionic

Framework7

APP 框架（拓展）

react-native

ElementUI （饿了么团队）：