前端——實用UI組件庫

本文轉載自查看原文 2017-11-29 15:46 17932 前端

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 （餓了么團隊）

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

描述：基於 Vue.js 的移動端組件庫，可按需加載組件

預覽：http://elemefe.github.io/mint-ui/#/

Cube-ui (滴滴內部組件庫)

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

描述：cube-ui 是基於 Vue.js 實現的精致移動端組件庫。

Vue-ydui (YDUI Touch 的一個Vue2.x實現版本，專為移動端打造)

http://vue.ydui.org/

一只基於Vue2.x的移動端&微信UI。 -YDUI Touch

React組件：

Zent

Zent ( \ˈzent\ ) 是有贊 PC 端 WebUI 規范的 React 實現，提供了一整套基礎的 UI 組件以及一些常用的業務組件

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

移動端框架

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/

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

預覽：
　　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://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。專屬於移動，采用 Flex 布局，用 rem 來做響應式開發，自定義Javascript組件、Less文件、Less變量，定制一份屬於自己的YDUI。
基於jQuery 2.0+
兼容性：
　　兼容絕大多數移動端設備（兼容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

預覽：http://m.ydui.org

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

GMU（百度GMU小組開發）

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

描述：基於zepto的輕量級mobile UI組件庫，符合jquery ui使用規范，提供webapp、pad端簡單易用的UI組件。
兼容iOS3+ / android2.1+，支持國內主流移動端瀏覽器，如safari, chrome, UC, qq等。
GitHub地址：https://github.com/fex-team/GMU

基礎引入：
　　　　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/
　　描述：FrozenJS 是針對移動端開發的 js 組件庫，其依賴 zepto.js 和 FrozenUI。簡單易用，輕量快捷，為移動端服務的前端框架。基於手Q樣式規范。應用在騰訊手Q增值業務。
兼容android 2.3 +，ios 4.0 + 。
　　GitHub地址：https://github.com/frozenui/frozenui

Foundation

中文官網：http://www.foundcss.com/
描述：Foundation是國外最流行的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。
GitHub地址：https://github.com/zurb/foundation-sites

基礎引入：　　
　　　　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://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 關注中文排版，根據用戶代理調整字體，實現更好的中文排版效果。

Amaze UI 以移動優先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現所有屏幕適配，適應移動互聯潮流。
　　基於jQuery
　　GitHub：https://github.com/amazeui/amazeui

Amaze UI Web 與 Amaze UI Touch

	Amaze UI Web
定位	移動優先、響應式、跨屏 UI 組件庫	專屬移動（手機）端的 UI 組件庫
JS 基礎庫	jQuery	React
CSS 預處理	Less	Sass
Grid	基於 float，12 列響應式	基於 flexbox，6 列流式
兼容性	兼容主流桌面、移動瀏覽器（WebView）有限支持 IE8	完整支持實現 12 版 flexbox 規范的瀏覽器（WebView），如 Android 4.4+、IE Mobile 11+、iOS 7.1+ Grid 和 NavBar 對按 09 版 flexbox 實現的瀏覽器（WebView）支持有待進一步測試
項目地址	Amaze UI@GitHub	Amaze UI Touch@GitHub
衍生版本	Amaze UI React - 共用 CSS，使用 React 實現交互	N/A
適用場景	響應式或移動網站熟悉 jQuery 兼容性要求較廣更適合后端渲染架構	針對手機端開發能夠駕馭 React 及相關配套技術瀏覽器（WebView）支持 flexbox，如 iOS、騰訊 TBS 2.0 內核的微信 WebView 可用於 SPA 架構

基礎引入：
　　　　CDN:

http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css
http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js

Pure

　　中文官網：https://www.purecss.cn/
　　描述：純CSS
　　美國雅虎公司出品的一組輕量級、響應式純css模塊，適用於任何Web項目。
　　GitHub：https://github.com/yahoo/pure/

基礎引入：
　　　　CDN:

<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

PC 端 UI框架

SUI（阿里巴巴國際UED團隊-商家業務事業部）

　　官網地址：http://sui.taobao.org/
　　描述：一套基於bootstrap開發的前端組件庫，同時她也是一套設計規范。
　　基於jquery

GitHub：https://github.com/sdc-alibaba/sui

基礎引入：
　　　　CDN:

<link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
<script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>

H-ui

　　官方地址：http://www.h-ui.net/
　　描述：輕量級前端框架，簡單免費，兼容性好，服務中國網站。
　　基於jQuery
　　GitHub地址：https://github.com/jackying/h-ui

layui

官方地址：http://www.layui.com/
描述：更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，
讓一切你所需要的元素與交互，從這里信手拈來。
　　layui 兼容人類正在使用的全部瀏覽器（IE6/7除外），可作為 PC 端后台系統與前台界面的速成開發方案。
經典模塊化前端框架

GitHub：https://github.com/sentsin/layui/

基礎引入：
　　　　layui.css
　　　　layui.js

uiKit（YOOtheme 團隊）

官網地址：http://www.getuikit.net/
描述：一款輕量級、模塊化的前端框架，可快速構建強大的web前端界面。
UIkit 兼容 IE9 以上現代瀏覽器。在 IE8 及其以下版本中，所有JavaScript 都會失效。
　　依賴jQuery

GitHub地址：https://github.com/uikit/uikit

基礎引入：
　　　　CDN:

<link rel="stylesheet" href="//cdn.bootcss.com/uikit/2.25.0/css/uikit.css" />
<script src="//cdn.bootcss.com/uikit/2.25.0/js/uikit.js"></script>

Bootstrap

　　中文官網：http://www.bootcss.com/
　　描述：簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。

基礎引入：
　　　　CDN：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

npm:
　　　　　　npm install bootstrap@3
　　其他基於bootstrap衍生出來的模塊：
　　　　Ace Admin后台管理系統模板：基於bootstrap3；http://ace.jeka.by/
　　　　Metronic后台管理模板：http://www.metronic.com/
　　　　H+:http://www.zi-han.net/theme/hplus/
　　　　jQuery UI+Bootstrap：https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/

jQuery UI

　　官方網址：http://jqueryui.com/

其他基於jQuery衍生出來的模板：
　　　　BUI：基於jQuery+KISSY UI:http://www.builive.com/
　　　　EasyUI:：http://www.jeasyui.net/
　　　　　　描述：使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
　　　　DWZ JUI:http://jui.org/

混合開發 UI框架

OnsenUI

　　官網地址：https://onsen.io/
　　描述：用來構建混合移動端APP的 HTML5 UI 框架,提供AngularJS 1, Angular 2+, React, Vue各種版本
　　GitHub地址：https://github.com/OnsenUI/OnsenUI

ionic

　　中文官網網址：http://www.ionic-china.com/

　　基於AngularJS
　　描述：ionic是一個強大的 HTML5應用程序開發框架(HTML5 Hybrid Mobile App Framework)。
ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。
ionic是一個輕量的手機UI庫，具有速度快，界面現代化、美觀等特點。

Framework7

　　官網地址：http://framework7.cn/
　　描述：Framework7 是一個開源免費的HTML框架可以用來開發混合移動應用（原生和HTML混合）或者開發 iOS & Android 風格的WEB APP。
　　也可以用來作為原型開發工具，可以迅速創建一個應用的原型。
　　Framework7 並不能兼容所有的設備。她只專注於為 iOS 和 Google Material 設計提供最好的體驗。Framework7 是一個針對iOS7的框架。從一開始，她就考慮到如何最方便快捷地實現iOS7上各種驚艷的UI組件，以及復雜的動畫和靈活的觸摸交互。所以Framework7是你實現像素級精度的iOS7應用的最佳選擇。
　　GitHub：https://github.com/framework7io/framework7

APP 框架（拓展）

react-native

　　中文官網地址：http://reactnative.cn/
　　描述：React Native使你能夠在Javascript和React的基礎上獲得完全一致的開發體驗，構建世界一流的原生APP。
React Native着力於提高多平台開發的開發效率 —— 僅需學習一次，編寫任何平台。(Learn once, write anywhere)
　　GitHub地址：https://github.com/facebook/react-native

weex

　　官網地址：http://weex.apache.org/cn/
　　描述：Weex 提供強大的跨平台能力，可以使用相同的 API 開發 Web，Android 和 iOS 應用。
同時，我們對接口了豐富的擴展能力。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 這 5 個前端組件庫，可以讓你放棄 jQuery UI 微信小程序UI組件、開發框架、實用庫微信小程序UI組件、開發框架、實用庫... 微信小程序UI組件、開發框架、實用庫... 前端框架Vue的組件庫(UI框架)的初步認識個人技術總結——使用element ui組件庫的前端開發前端如何搭建vue UI組件庫/封裝插件(從零到有) 目前流行前端幾大UI框架 ----vue Vue的UI組件庫各種UI組件，插件庫前端組件庫

前端——實用UI組件庫

Angular UI 組件

ngx-bootstrap

NG-bootstrap

NG-ZORRO

NG-alain

NGX-admin

primeng

Vue組建庫：

iView:

ElementUI （ 餓了么團隊）：

Mint UI （餓了么團隊）

Cube-ui (滴滴內部組件庫)

Vue-ydui (YDUI Touch 的一個Vue2.x實現版本，專為移動端打造)

React組件：

Zent

移動端框架

SUI Mobile（阿里巴巴共享業務事業部UED團隊）

Weui（微信官方設計團隊）

YDUI Touch

GMU（百度GMU小組開發）

FrozenUI（QQVIP FD團隊• Alloyteam團隊）

Foundation

Amaze UI

Pure

PC 端 UI框架

SUI（阿里巴巴國際UED團隊-商家業務事業部）

H-ui

layui

uiKit（YOOtheme 團隊）

Bootstrap

jQuery UI

混合開發 UI框架

OnsenUI

ionic

Framework7

APP 框架（拓展）

react-native

weex

免責聲明！

ElementUI （餓了么團隊）：