开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

前端组件库

搭建web app常用的样式/组件等收集列表(移动优先)

• 一个常用的PHP类库, 资源以及技巧列表 awesome-php 推荐

0. 前端自动化(Workflow)

• 前端构建工具
  • Webpack - module bundler
  • Yeoman - a set of tools for automating development workflow
  • gulp - The streaming build system
    • use-gulp
  • grunt - the JavaScript Task Runner
  • F.I.S - 前端集成解决方案
  • Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具集
  • node-prune - Remove unnecessary files from node_modules
• 前端模块管理器
  • Bower - A package manager for the web
  • Browserify
  • Component
  • Duo
  • RequireJS
  • Sea.js
  • LABjs - 文件加载器
  • css-modulesify - CSS模块加载器
• css预处理器
  • Less - Less is More , Than CSS
  • Sass - Syntactically Awesome Style Sheets
  • Stylus - Expressive, dynamic, robust CSS
• 前端性能分析工具
  • analyze-css - CSS 选择器的复杂度和性能分析器

1. 前端UI框架(Frameworks)

• Bootstrap
• Foundation
• Amaze UI
• Semantic UI
• Pure CSS
• topcoat
• UIkit
• Material UI
• Materialize - 一个基于 Material Design 的 CSS 框架
• Framework7
• mui
• ionic framework
• Fries
• jQuery Mobile
• App.js
• Office UI Fabric - 微软 Office 前端团队的框架
• Polymer - Google发布的Web组件构建框架
• Layui - 经典模块化前端UI框架
• wired-elements - 一个有手绘效果的网页组件库
• mustard-ui - 一个简洁、好看的 CSS 框架，压缩后只有5.28KB
• taro-ui - 一款基于 Taro 框架开发的多端 UI 组件库
• alibaba/ice - 飞冰是一套基于 React 的中后台应用解决方案

2. JavaScript 框架汇总

• JavaScript 框架

  • react
    • ant-design - A UI Design Language
    • ant-design-mobile - A configurable Mobile UI
    • ant-design-pro - An out-of-box UI solution for enterprise applications
  • Angular
  • Vue.js - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)
    • vueComponent/ant-design-vue - An enterprise-class UI components based on Ant Design and Vue.
    • awesome-vue
    • Element - 基于 Vue 2.0 构建了一套完整的桌面 UI 组件库
    • Vuex - 一个专门为 Vue.js 应用设计的状态管理架构
    • at-ui - 一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站产品
    • Mint UI：基于 Vue.js 的移动端组件库
    • Vux - 基于 Vue 和 WeUI 的 UI 组件库
    • vonic - 基于 Vue.js 和 Ionic 的移动 UI 组件库    - vuetify - vue2.0组件库
    • iView - 一套基于 Vue.js 的高质量 UI 组件库
    • vue-i18n
  • preact - React 的 3kb 轻量化方案，拥有同样的 ES6 API
  • jQuery
  • Backbone.js
  • ember.js
  • Ractive.js
  • KISSY
  • Zepto.js
  • Vanilla JS
  • Can.js
  • Avalon
  • T3 JavaScript Framework - 一个用于搭建大型Web应用的客户端JS框架
  • jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用

• 轻量级JavaScript框架

  • Min.js - Super minimal selector and event library
  • skel.js - A lightweight responsive framework
  • Sprint.js - 一个高性能、小体积的 DOM 操作库
  • knockout
  • PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API

• 函数式反应型编程框架 FRP (Functional Reactive Programming) library

  • Bacon.js - A small functional reactive programming lib for JavaScript.
  • Flapjax - 一个支持FRP的JavaScript框架

• 混合开发框架

  • Electron - 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
  • React Native - 使用JavaScript和React构建原生手机APP
  • electron-react-boilerplate - Electron应用程序样板(基于React、Redux、React Router、Webpack、React Transform HMR用于应用程序快速开发)
  • Weex - Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架
  • Flutter - Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面

• 微信小程序开发库

  • Tencent/weui-wxss - WeUI for 小程序 为微信小程序量身设计
  • Tencent/wepy - 小程序组件化开发框架
  • youzan/vant-weapp - 轻量、可靠的小程序 UI 组件库 https://youzan.github.io/vant-weapp
  • Meituan-Dianping/mpvue - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
  • meili/minui - 基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化
  • NervJS/taro - 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用
  • dcloudio/uni-app - 使用 Vue.js 开发跨平台应用的前端框架 http://uniapp.dcloud.io
  • didi/chameleon - 一套代码运行多端，一端所见即多端所见 https://CML.JS.org
  • zhuanzhuanfe/fancy-mini - 小程序代码库，封装一些常用的功能模块和ui组件。

• JavaScript 工具库

  • underscore.js
  • Underscore.string.js字符串操作库
  • functional.js
  • Lo-Dash - A JavaScript utility library
  • Lazy.js - a functional utility library for JavaScript
  • Fn.js
  • Way.js - 双向数据绑定库
  • boiler - a utility library that makes tasks in JavaScript easier
  • 快捷键操作
    • KeyboardJS - A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.
    • mousetrap - Simple library for handling keyboard shortcuts in Javascript
    • Keys.js - 应用快捷键
    • simple-hotkeys
    • jquery.hotkeys
    • Mousetrap - 键盘快捷键操作
  • AlloyLever - 移动web开发者工具面板

3. 前端游戏框架

• cocos2d-html5
• Egret Engine
• LimeJS
• EaselJS
• three.js
• AlloyStick
• The-Best-JS-Game-Framework
• CanvasEngine
• Quintus
• Stage.js
• phaser - 一个快速、免费、开源的 HTML5 游戏框架
• p2.js - web 物理引擎

4. ui组件库(CSS Framework)

• WeUI - 微信官方UI库
  • jQuery WeUI - WeUI的jQuery版本
• GMU - 基于zepto的ui组件库，适用于移动端
• FrozenUI - 腾讯移动端组件库
• NEC - 更好的CSS方案
• NEJ - 更好的JS解决方案
• Pure CSS Components
• magic-of-css
• Primer - The CSS toolkit and guidelines that power GitHub
• light7 - A Light and easy to use UI Lib
• Spectre.css - 轻量、响应式的现代 CSS 框架
• mobi.css - 一个轻量、灵活的移动端 CSS 框架

5. 基础模版

• 浏览器统一(Cross Browser)
  • HTML5 BOILERPLATE
  • Modernizr
  • Normalize.css
  • HTML5 Shiv - 让ie浏览器成为支持html5的浏览器的解决方法
  • cssFx - 为CSS3自动生成浏览器前缀
  • -prefix-free - Break free from CSS prefix hell
  • ieBetter.js - make ie browser like a morden browser main for ie6~ie8
  • es6-promise - Promise 对象的兼容
• 响应式
  • Responsive - 响应式布局
  • Enquire.js - Awesome Media Queries in JavaScript
  • Free Wall - 创建桌面，移动和平板的动态网格布局
• 适配方案
  • MetaHandler.js：移动端适配各种屏幕无痛工具脚本
  • lib-flexible: 移动端自适应方案
    • 参考: 使用Flexible实现手淘H5页面的终端适配
    • flexible demo 1
    • flexible demo 2
  • pageResponse
  • responsive-page

6. 排版

• yue.css
• typo.css
• chinese-copywriting-guidelines - 中文文案排版指南

7. 网格系统

• grid
• Flexbox Grid
• MasonJS - creating a perfect grid

8. 路由和链接(Routing And URLs)

• History.js - gracefully supports the HTML5 History/State APIs
• jquery-pjax - pushState+ajax
• jquery-address - Deep Linking
• page.js - Micro client-side router
• crossroads.js
• hash.js
• path.js
• director.js - 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)
• URI.js
• Roadcrew.js
• SpeakingURL
• uparams - An URL params parser
• StateMan - 一个处理深层次单页系统的路由库
• qs - A querystring parser with nesting support
• query-string - Parse and stringify URL query strings

9. UA 识别

• detector
• ua-parser-js
• platform.js

10. 表单处理

10.1 表单验证(Form Validator)/表单提示

• Validator
• Parsley
• jquery.form.js - jQuery Form Plugin
• Validform
• validator.js
• jquery-validation - jQuery Validation Plugin
• formvalidator.js
• Fort.js – 表单填写进度提示
• mailcheck - 用于检测email地址的域名
• Floatlable.js - 输入时显示placeholder文本
• jQuery Label Better
• validator.js

10.2 < input > 相关

• cleave.js - 格式化你的输入内容

10.3 < select > 相关

• Chosen
• Select2
• bootstrap-select

10.4 单选框/复选框相关

• iCheck - 增强复选框和单选按钮
• Switchery - iOS 7 style switches for your checkboxes

10.5 上传组件

• jQuery File Upload Plugin
• 百度 Web Uploader
• uploadify
• Plupload
• Fine Uploader
• arale-upload - 轻量级 iframe and html5 file uploader
• Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)
• flow.js
• localResizeIMG - 前端本地客户端压缩图片，兼容IOS，Android，PC
• simple-uploader

10.6 日期选择

• tui.calendar - A JavaScript calendar that everything you need.
• Both Date and Time picker widget based on twitter bootstrap
• GMU 日历组件
• Mobiscroll
• Pikaday - 日期选择器
• 价格日历
  • PriceCalendar - 酒店价格日历
    • API文档
    • DEMO
  • price-calendar - 价格日历
  • price_calendar - 含有商品价格的日历控件
• airbnb/react-dates - Airbnb 的日期选择器

10.7 取色

• Colorpicker plugin for Twitter Bootstrap
• average-color - Get Average Color of Image

10.8 标签插件(Tag)

• TaggingJS – 可以灵活定制的 jQuery 标签系统插件
• selectize.js
• Bootstrap Tags Input
• jQuery-Tags-Input

10.9 自动完成插件

• algolia/autocomplete.js - 自动补全插件
• At.js - 一个Twitter/微博样式的@自动完成插件
• jquery-textcomplete - 智能搜索提示框/自动补全
• typeahead.js - a fast and fully-featured autocomplete library

10.10 样式修正

• autosize - 使文本框自动适应所输入的内容

11. 图表绘制/图形库(Graphics)

• apache/incubator-echarts - 百度开源可视化库
• alibaba/BizCharts - 阿里巴巴桌面端商业统计图表解决方案
• antvis/f2 - 蚂蚁金服移动端可视化解决方案
• Highcharts
• Chart.js - Simple HTML5 Charts using Canvas
• Chartist.js
• D3.js - A JavaScript visualization library for HTML and SVG.
  • intro-to-d3 - a D3.js tutorial
• Bonsai - 一个功能强大的JavaScript图形库
• epoch - 数据图表可视化
• Vis.js
• Coutour.js
• ecomfe/zrender - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！
• apexcharts.js - Interactive and Modern SVG Charts
• mapbox/mapbox-gl-js - MapboxGL 基于 WebGL 使用矢量切片和 Mapbox 样式渲染交互式地图
• Kujiale-Mobile/Painter - 小程序生成图片库
• canvg/canvg - Javascript SVG parser and renderer on Canvas

12. 日期格式化 & 时间轴

• Moment.js - 日期处理
• Day.js - 日期处理
• Smart Time Ago - 显示相对时间
• timeline.js
• timeago.js
• date-utils - Date Pollyfills for Node.js and Browser

13. 页面交互

13.1 Slider

• slick - the last carousel you'll ever need
• Swipe - the most accurate touch slider
• Swiper - Most modern mobile touch slider
• iscroll - Smooth scrolling for the web
• iSlider - 移动端滑动组件
• OwlCarousel - create beautiful responsive carousel slider
• jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
• Glide.js - 轻量级滑块组件
• PhotoSwipe
• TouchSlide - 触屏滑动特效(焦点图,Tab切换)
• better-scroll - inspired by iscroll, and it supports more features and has a better scroll perfermance

13.2 瀑布流

• Masonry
• Isotope - Filter & sort magical layouts
• Bricklayer

13.3 懒加载/加载监听/预加载

• imagesLoaded
• Echo.js
• lazySizes
• jquery_lazyload
• BttrLazyLoading
• lazyload.js
• layzr.js - 一个小巧快速的图片懒加载库
• waitForImages - 图片加载监听库
• PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
• bindWithDelay - jQuery Plugin For Delayed Event Execution
• TypeWatch - 停止输入时调用

13.4 图片轮播(幻灯片)/图片展示

• FlexSlider
• unslider - 小而美的轮播库
• prettyPhoto
• FlickerPlate - A cool jQuery plugin that lets you flick through content.
• Holder.js - Client-side image placeholders.
• RowGrid.js - 在径直的行里放置图片
• ImageLightbox.js - 灯箱效果
• JQuery Panorama Viewer - 全景视图
• Intense Images - 全屏查看图片
• Picturefill - 一个响应式图片 JS 插件
• zoom.js - 一个 jQuery 图片放大插件
• watermarkjs - 一个在浏览器中添加图片水印的 JS 库
• responsive-images.js
• Turntable.js - 轻易实现图像的3D旋转
• ResponsifyJS - 让图像完全响应式而不会牺牲图像的主要部分
• react-slick - React 实现的轮播图插件

13.5 图片剪裁/图片处理/图片转换

• cropperjs - 图片裁切
• Jcrop - Image Cropping Plugin for jQuery
• croppic - an image cropping jquery plugin
• smartcrop.js - 智能图片裁剪库
• jQuery.eraser - 图像擦除插件
• DD_belatedPNG.js - 让IE6支持透明PNG图片
• FocusPoint.js 实现图片的响应式裁剪
• imgareaselect
• CSSgram - CSS 实现的 Instagram 滤镜库
• instagram.css - 另一个 CSS 实现的 Instagram 滤镜库
• antimoderate - 图片模糊库
• vue-cropper - Vue.js 的图片剪裁插件
• react-cropper - React 的图片剪裁插件
• react-image-crop - React 的图片剪裁插件
• rasterizeHTML.js - HTML转图片(网页截图)
• html2canvas - HTML转图片(实现纯JS网页截图)
• dom-to-image - HTML转图片
• domvas - HTML转图片
• merge-images - 多张图片合成一张图片的浏览器 JS 库，使用了 Canvas

13.6 进度条/加载动画(Loading)

• NProgress.js
• progress.js
• HubSpot/pace - Pace 是一个页面加载进度条工具
• jquery-ajax-progress
• nanobar - Very lightweight progress bars.
• waitMe - 很漂亮的loading效果
• spin.js
• sonic.js
• fakeLoader.js
• loaders.css - 一个为性能优化的实现加载动画效果的 CSS 框架
• css-loaders
• Sausage - 跟踪滚动条并记录当前阅读所处节点
• loading.io - 一个 Loading 图标的网站

13.7 侧滑插件(offcancas)

• pushy - a responsive off-canvas navigation menu
• Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单

13.8 菜单(Menu)

• SuperFish - 基于jQuery的级联下拉菜单
• Responsive Nav - 响应式导航
• metisMenu - A jQuery menu plugin

13.9 滚动侦测(ScrollSpy)

• jquery-scrollspy(1)
• jquery-scrollspy(2)
• Waypoints
• ScrollMagic - 像进度条一样使用滚动条

13.10 滚动加载更多/下拉刷新(Pull to Refresh)

• jScroll
• web-pull-to-refresh
• pulltorefresh
• RubberBand.js - add pull-to-refresh functionality to any page.

13.11 平滑滚动插件(Smooth Scroll)

• jquery-smooth-scroll
• jquery.scrollTo - 平滑滚动到页面指定位置
• smooth-scroll
• scrollUp
• elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件

13.12 全屏滚动/全屏切换

• pagePiling.js - 全屏滚动效果
• fullPage.js
• onepage-scroll
• zepto.fullpage - 专注于移动端的fullPage.js
• screenfull.js - 切换全屏模式

13.13 分屏滚动

• multiscroll.js - 分屏滚动效果

13.14 转场效果

• Animsition - 页面切换时的过渡效果

13.15 固定元素(Sticky)

• sticky - jQuery Plugin for Sticky Objects
• jquery.pin - 固定页面元素
• stickUp
• Slinky.js - 堆叠头部创建滑动导航列表

13.16 触控事件

• Hammer.js
• jquery.event.move.js

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期
11-06 可心卡盟:win10系统火狐flash插件崩溃怎么
11-06 亲亲特价:怎么删除回收站图标
11-06 济南大学虚拟社区:鲁大师节能降温的具体办
11-06 xlueops.exe:无线网络安装向导
11-06 女斗合众国:win7系统cf与主机连接不稳定怎
11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头
11-06 qizideyouhuo:应用程序无法正常启动0xc0000
11-06 ipz-185:win7系统vcf文件怎么打开
11-06 傻哥蹦迪:win10系统s4怎么打开usb调试
11-06 八神浩树gtaste:回收站清空了怎么恢复
11-06 妖尾之黑色守护:win10系统电脑没有1440x900
11-06 校园至尊魔王小说:win7系统浏览网页时字体
11-06 女斗合众国:win10系统访问共享文件夹提示请
11-06 tokyo hot n0654:恢复win7系统默认字体一招
11-06 雨酷仙境:设置win7系统转移临时文件夹腾出
11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原
11-06 tunespotting:win10系统火狐flash插件总是
11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什
11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密
11-06 博益网首页:ao3网页版进入不了解决方法
11-06 漏斗子专栏: 网站数据分析小白易懂精华篇
11-06 见证双虹怎么做:win7系统开启telnet命令的
11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务
11-06 国光中学校歌:提交网站到alexa查询详细步骤
11-06 西安有情天:静态网页和动态网页的区别
11-06 红木雅尚斋:外部链接构造对网站的好处
11-06 前官礼遇：防止域名劫持–增强域安全性的10
11-06 密传二转答案: 中文分词算法有哪些
11-06 金泉家园邮编:百度快照劫持的表现及应对方

上一篇：

Raynos/mercury: A truly modular frontend framework发布时间：2022-06-07

下一篇：

Sponsor @tj on GitHub Sponsors · GitHub发布时间：2022-06-07

热门推荐

More+

• 

  krishnaik06/Machine-Learning-in-90-days

• 

  joaomh/curso-de-matlab

• 

  美元符号为什么是“$”

• 

  卧的笔顺,推荐卧的笔画,聊聊卧的部首

• 

  rugk/mastodon-simplified-federation: Sim

热门话题

More+

2022-11-06
剪的笔顺,诠释剪的笔画,认识剪的部首

六六分期app的软件客服如何联系？(六六分期
2023-10-27

florent37/ViewAnimator: A fluent Android
2022-08-15

florent37/Shrine-MaterialDesign2: implem
2022-08-17

CVE-2020-36276
2022-09-23

SimpleSoftwareIO/simple-sms: Send and re
2022-08-13

阅读排行榜

1 六六分期app的软件客服如何联系？(六六分期

六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
阅读：16661|2023-10-27
2 可心卡盟:win10系统火狐flash插件崩溃怎么

今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
阅读：9075|2022-11-06
3 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
阅读：7743|2022-11-06
4 济南大学虚拟社区:鲁大师节能降温的具体办

今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
阅读：8103|2022-11-06
5 xlueops.exe:无线网络安装向导

我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
阅读：8004|2022-11-06
6 女斗合众国:win7系统cf与主机连接不稳定怎

今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
阅读：8800|2022-11-06
7 0xc000022-[cf烟雾头]cf怎么调烟雾头

电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
阅读：7978|2022-11-06
8 qizideyouhuo:应用程序无法正常启动0xc0000

我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
阅读：7393|2022-11-06
9 ipz-185:win7系统vcf文件怎么打开

今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
阅读：7916|2022-11-06
10 傻哥蹦迪:win10系统s4怎么打开usb调试

今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
阅读：6992|2022-11-06

• 关于我们

  创业团队 加入我们 媒体报道 合作伙伴 公益事业

• 产品与服务

  寻求合作 项目投资 干货视频 经理人培训 招聘代理

• 解决方案

  一站式 制造业 教育科研 行业案例

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服

地址：深圳市南山区西丽大学城创智工业园

电邮：jeky_zhao#qq.com

移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap

返回顶部