【轉】前端——實用UI元件庫

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元件：

　　　　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

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 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等。

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 項目。

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

基礎引入：　　

<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 架構

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項目。

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

<link rel="stylesheet" href="https://unpkg.com/[email protected]/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

<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/

　　描述：輕量級前端架構，簡單免費，相容性好，服務中國網站。

https://github.com/jackying/h-ui

layui

http://www.layui.com/

描述：更多是為服務端程式員量身定做，你無需涉足各種前端工具的複雜配置，隻需面對浏覽器本身，

讓一切你所需要的元素與互動，從這裡信手拈來。

　　layui 相容人類正在使用的全部浏覽器（IE6/7除外），可作為 PC 端背景系統與前台界面的速成開發方案。

經典子產品化前端架構

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

　　　　layui.css

　　　　layui.js

uiKit（YOOtheme 團隊）

官網位址：

http://www.getuikit.net/

描述：一款輕量級、子產品化的前端架構，可快速建構強大的web前端界面。

UIkit 相容 IE9 以上現代浏覽器。在 IE8 及其以下版本中，所有JavaScript 都會失效。

　　依賴jQuery

https://github.com/uikit/uikit

<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開發更迅速、簡單。

<!-- 最新版本的 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各種版本

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應用的最佳選擇。

https://github.com/framework7io/framework7

APP 架構（拓展）

react-native

　　中文官網位址：

http://reactnative.cn/

　　描述：React Native使你能夠在Javascript和React的基礎上獲得完全一緻的開發體驗，建構世界一流的原生APP。

React Native着力于提高多平台開發的開發效率 —— 僅需學習一次，編寫任何平台。(Learn once, write anywhere)

https://github.com/facebook/react-native

weex

http://weex.apache.org/cn/

　　描述：Weex 提供強大的跨平台能力，可以使用相同的 API 開發 Web，Android 和 iOS 應用。

同時，我們對接口了豐富的擴充能力。

轉自：https://www.cnblogs.com/xuepei/p/7920888.html