https://www.cnblogs.com/xuepei/p/7920888.htmljavascript
是一套Bootstrap 組件css
官網:https://valor-software.com/ngx-bootstrap/#/html
github: https://github.com/valor-software/ngx-bootstrap前端
bootstrap4組件vue
官網:https://ng-bootstrap.github.io/#/homejava
0.5,0.6兩個版本分別支持angular4.x和5.xreact
https://ng.ant.design/#/docs/angular/introduce,jquery
https://cipchk.github.io/ng-alain/#/dashboard/v1android
github: https://github.com/cipchk/ng-alainios
http://akveo.com/ngx-admin/#/pages/dashboard
一個豐富的組件庫,而且有不一樣的主題可供選擇
https://www.primefaces.org/primeng/#/setup
https://www.primefaces.org/serenity/
https://www.iviewui.com/docs/guide/introduce
iView 是一套基於 Vue.js 的開源 UI 組件庫,主要服務於 PC 界面的中後臺產品。
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
中文官網:http://mint-ui.github.io/#!/zh-cn
描述:基於 Vue.js 的移動端組件庫,可按需加載組件
預覽:http://elemefe.github.io/mint-ui/#/
中文官網:https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
描述:cube-ui 是基於 Vue.js 實現的精緻移動端組件庫。
http://vue.ydui.org/
一隻基於Vue2.x的移動端&微信UI。 -YDUI Touch
Zent ( \ˈzent\ ) 是有贊 PC 端 WebUI 規範的 React 實現,提供了一整套基礎的 UI 組件以及一些經常使用的業務組件
https://www.youzanyun.com/zanui/zent/zh/guides/install
官網: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:
1
2
3
|
<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 爲微信 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
官網: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
GitHub地址:https://github.com/ydcss/ydui
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
官方地址:http://frozenui.github.io/
描述:FrozenJS 是針對移動端開發的 js 組件庫,其依賴 zepto.js 和 FrozenUI。簡單易用,輕量快捷,爲移動端服務的前端框架。基於手Q樣式規範。應用在騰訊手Q增值業務。
兼容android 2.3 +,ios 4.0 + 。
GitHub地址:https://github.com/frozenui/frozenui
中文官網: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>
官方地址: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 列流式 |
兼容性 |
|
|
項目地址 | Amaze UI@GitHub | Amaze UI Touch@GitHub |
衍生版本 | Amaze UI React - 共用 CSS,使用 React 實現交互 |
N/A |
適用場景 |
|
|
基礎引入:
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
中文官網: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">
官網地址: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>
官方地址:http://www.h-ui.net/
描述:輕量級前端框架,簡單免費,兼容性好,服務中國網站。
基於jQuery
GitHub地址:https://github.com/jackying/h-ui
官方地址:http://www.layui.com/
描述:更可能是爲服務端程序員量身定作,你無需涉足各類前端工具的複雜配置,只需面對瀏覽器自己,
讓一切你所須要的元素與交互,從這裏信手拈來。
layui 兼容人類正在使用的所有瀏覽器(IE6/7除外),可做爲 PC 端後臺系統與前臺界面的速成開發方案。
經典模塊化前端框架
GitHub:https://github.com/sentsin/layui/
基礎引入:
layui.css
layui.js
官網地址: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>
中文官網: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/
官方網址:http://jqueryui.com/
其餘基於jQuery衍生出來的模板:
BUI:基於jQuery+KISSY UI:http://www.builive.com/
EasyUI::http://www.jeasyui.net/
描述:使用easyui你不須要寫不少代碼,你只須要經過編寫一些簡單HTML標記,就能夠定義用戶界面。
DWZ JUI:http://jui.org/
官網地址:https://onsen.io/
描述:用來構建混合移動端APP的 HTML5 UI 框架,提供AngularJS 1, Angular 2+, React, Vue各類版本
GitHub地址:https://github.com/OnsenUI/OnsenUI
中文官網網址:http://www.ionic-china.com/
基於AngularJS
描述:ionic是一個強大的 HTML5應用程序開發框架(HTML5 Hybrid Mobile App Framework)。
ionic 主要關注外觀和體驗,以及和你的應用程序的 UI 交互,特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。
ionic是一個輕量的手機UI庫,具備速度快,界面現代化、美觀等特色。
官網地址: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
中文官網地址:http://reactnative.cn/
描述:React Native使你可以在Javascript和React的基礎上得到徹底一致的開發體驗,構建世界一流的原生APP。
React Native着力於提升多平臺開發的開發效率 —— 僅需學習一次,編寫任何平臺。(Learn once, write anywhere)
GitHub地址:https://github.com/facebook/react-native
官網地址:http://weex.apache.org/cn/
描述:Weex 提供強大的跨平臺能力,可使用相同的 API 開發 Web,Android 和 iOS 應用。
同時,咱們對接口了豐富的擴展能力。
一、 iView UI組件庫
iView 是一套基於 Vue.js 的開源 UI 組件庫,主要服務於 PC 界面的中後臺產品。iView的組件仍是比較齊全的,更新也很快,文檔寫得很詳細。有公司團隊維護,比較可靠的Vue UI組件框架。iView生態也作得很好,還有開源了一個iView Admin,作後臺很是方便。官網上介紹,iView已經應用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團、新浪、聯想等大型公司的產品中。
iView官網:https://www.iviewui.com/
二、Vux UI組件庫
Vux是基於WeUI和Vue2.x開發的移動端UI組件庫,主要服務於微信頁面。Vux的定位已經很明確了,一是:Vue移動端UI組件庫,二是:WeUI的基礎樣式庫。Vux的組件涵蓋了全部的WeUI的內容,還擴展了一些經常使用的組件。好比:Sticky、timeline、v-chart、XCircle。Vux是我的維護的。可是GitHub上star仍是很高的,達到13k。在GitHub上看到對issue的關閉仍是很迅速的。Vux文檔基本的組件用法和效果都講解到位了。在vux官網上也展現了不少Vux的使用案例。在微信頁面開發中,基本沒有太多的bug,開發仍是比較順手的。
Vux官網:https://vux.li/
三、Element UI組件庫
Element,一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫。Element是餓了麼前端開源維護的Vue UI組件庫,更新頻率仍是很高的,基本一週到半個月都會發佈一個新版本。組件齊全,基本涵蓋後臺所需的全部組件,文檔講解詳細,例子也很豐富。沒有實際使用過,網上的Element教程和文章比較多。Element應該是一個質量比較高的Vue UI組件庫。
Element官網:http://element.eleme.io/#/zh-CN
四、Mint UI組件庫
Mint UI基於 Vue.js 的移動端組件庫,一樣出自餓了麼前端的項目。Mint UI是真正意義上的按需加載組件。能夠只加載聲明過的組件及其樣式文件。Mint UI 採用 CSS3 處理各類動效,避免瀏覽器進行沒必要要的重繪和重排,從而使用戶得到流暢順滑的體驗。網上的視頻教程不少都是基於Mint UI來說的,開發移動端web項目仍是很方便,文檔也很簡介明瞭。不少頁面Mint UI組件都已經封裝好,基本能夠照着例子寫,簡單的調整一下就能夠實現。不過,在GitHub上看最後一次代碼提交在2018年1月16日,截止到目前已通過去半年了。不知道是項目比較穩定沒有更新,仍是項目有被廢棄的可能。咱們會持續關注Mint UI的動態。
Mint UI官網:http://mint-ui.github.io/#!/zh-cn
五、Bootstrap-Vue UI組件庫
Bootstrap-VUE提供了基於vue2的Bootstrap V4組件和網格系統的實現,完成了普遍和自動化的WAI ARA可訪問性標記。uiv是基於Vue2的Bootstrap 3實現。Bootstrap 4是最新發布的版本,與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關的部分變成了相關的組件。同時 Bootstrap.min.css 的體積減小了40%以上。Bootstrap4 放棄了對 IE8 以及 iOS 6 的支持,如今僅僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。想當初剛流行響應式網站的時候,Bootstrap是世界上最受歡迎的創建移動優先網站的框架,Bootstrap能夠說風靡全球。就算放在如今不少企業網站都是採用Bootstrap作的響應式。Bootstrap-Vue可讓你在Vue中也實現Bootstrap的效果。
Bootstrap-Vue官網:https://bootstrap-vue.js.org/
uiv官網:https://uiv.wxsm.space/
六、Ant Design Vue UI組件庫
Ant Design Vue是 Ant Design 3.X 的 Vue 實現,開發和服務於企業級後臺產品。在GitHub上能夠找到幾個Ant Design的Vue組件。不過相比較而言,Ant Design Vue更勝一籌。Ant Design Vue共享Ant Design of React設計工具體系,實現了全部Ant Design of React的組件,支持現代瀏覽器和 IE9 及以上(須要 polyfills)。可讓熟悉Ant Design的在使用Vue時,很容易的上手。
Ant Design Vue官網:https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/
七、AT-UI UI組件庫
AT-UI 是一款基於 Vue.js 2.0 的前端 UI 組件庫,主要用於快速開發 PC 網站中後臺產品,支持現代瀏覽器和 IE9 及以上。AT-UI 更加精簡,實現了後臺經常使用的組件。
AT_UI官網:https://at-ui.github.io/at-ui/#/zh
八、Vant UI組件庫
Vant是一個輕量、可靠的移動端 Vue 組件庫。Vant是有贊團隊開源的,主要維護也是有贊團隊。Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本,二者基於相同的視覺規範,提供一致的 API 接口,助力開發者快速搭建小程序應用。截止到目前,Vant已經開源了50+ 個通過有贊線上業務檢驗的組件。好比:、AddressEdit 地址編輯、AddressList 地址列表、Area 省市區選擇、Card 卡片、Contact 聯繫人、Coupon 優惠券、GoodsAction 商品頁行動點、SubmitBar 提交訂單欄、Sku 商品規格彈層。若是作商城的,不太在乎界面,實現業務邏輯的話,用Vant組件庫開發仍是很快的。
Vant官網:https://youzan.github.io/vant/#/zh-CN/intro
九、cube-ui UI組件庫
cube-ui 是基於 Vue.js 實現的精緻移動端組件庫。由滴滴內部組件庫精簡提煉而來,經歷了業務一年多的考驗,而且每一個組件都有充分單元測試,爲後續集成提供保障。在交互體驗方面追求極致。遵循統一的設計交互標準,高度還原設計效果;接口標準化,統一規範使用方式,開發更加簡單高效。支持按需引入和後編譯,輕量靈活;擴展性強,能夠方便地基於現有組件實現二次開發。
cube-ui官網:https://didi.github.io/cube-ui/#/zh-CN
十、Muse-UI UI組件庫
Muse-UI基於 Vue 2.0 優雅的 Material Design UI 組件庫。Muse UI 擁有40多個UI 組件,用於適應不一樣業務環境。Muse UI 僅需少許代碼便可完成主題樣式替換。Muse UI 可用於開發的複雜單頁應用
Muse-UI官網:https://muse-ui.org/#/zh-CN
十一、N3-components UI組件庫
N3組件庫是基於Vue.js構建的,讓前端工程師和全棧工程師能快速構建頁面和應用。N3-components超過60個組件 組件列表、自定義樣式、支持多種模化範式(UMD)、使用ES6進行開發。
N3官網:https://n3-components.github.io/N3-components/component.html
十二、Mand Mobile
Mand Mobile是面向金融場景的Vue移動端UI組件庫,豐富、靈活、實用,快速搭建優質的金融類產品,讓複雜的金融場景變簡單。Mand Mobile含有豐富的組件30+的基礎組件,覆蓋金融場景,極高的易用性組件均有詳細說明文檔、案例演示,汲取最前沿技術,組件化輕量化實現,兼顧穩定和品質,努力實現金融場景的全覆蓋。
Mand Mobile官網:https://didi.github.io/mand-mobile/#/zh-CN/home
1三、we-vue UI組件庫
we-vue 是一套基於 Vue.js 的移動關組件庫,結合 weui.css 樣式庫,封裝了一系列組件,很是適於微信公衆號等移動端開發。we-vue 包含35+ 個組件,單元測試覆蓋率超 98%,支持 babel-plugin-import,完善的在線文檔,詳細的在線示例。
we-vue官網:https://wevue.org/
1四、veui UI組件庫
veui是一個由百度EFE team開發的Vue企業級UI組件庫。目前文檔尚未,只有demo。GitHub上說是正在進行的一項工做。那咱們就耐心等待吧。
veui官網:https://ecomfe.github.io/veui/components/#/
1五、Semantic-UI-Vue UI組件庫
Semantic-UI-Vue是基於 Vue.js對Semantic-UI 框架的實現。Semantic做爲一款開發框架,幫助開發者使用對人類友好的HTML語言構建優雅的響應式佈局。Semantic-UI-Vue提供了一個相似於 Semantic-UI 的 API 以及一組可定製的主題。
Semantic-UI-Vue官網:https://semantic-ui-vue.github.io/#/
1六、vue-beauty
vue-beauty是一套基於 vue.js 和 ant-design樣式 的PC端 UI 組件庫,旨在幫助開發者提高產品體驗和開發效率、下降維護成本。vue-beauty包含豐富的組件,涵蓋經常使用場景,基於vue組件化開發,數據驅動視圖,封裝複雜性,提供簡單友好的api,基於ant design樣式優化。
vue-beauty官網:https://fe-driver.github.io/vue-beauty
1六、NutUI組件庫NutUI是一套京東風格的移動端Vue組件庫,開發和服務於移動Web界面的企業級前中後臺產品。NutUI組件庫支持跨平臺,自動轉微信小程序組件(稍後上線,敬請期待),30+ 京東移動端項目正在使用,基於京東APP 7.0 視覺規範,支持按需加載,詳盡的文檔和示例,支持定製主題,支持多語言(國際化),支持 TypeScript,支持服務端渲染(Vue SSR),單元測試加持,配套有基於Webpack的構建工具,可快速建立已內置本組件庫的Vue工程。NutUI官網:https://nutui.jd.com/#/index