前端——實用UI組件庫

時間  2019-11-12
標籤 前端 實用 組件 简体版
原文   原文鏈接

Angular UI 組件

ngx-bootstrap

是一套Bootstrap 組件javascript

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

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

NG-bootstrap

bootstrap4組件vue

官網：https://ng-bootstrap.github.io/#/homejava

NG-ZORRO

0.5，0.6兩個版本分別支持angular4.x和5.xreact

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

NG-alain

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

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

NGX-admin

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

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 應用。同時，咱們對接口了豐富的擴展能力。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程