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