前端框架集合

① 前端ui框架有哪些

以下是几个精致的Web UI框架：
1、Aliceui
Aliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。
gitHub地址：https://github.com/aliceui/aliceui.github.io
2、Amazeui
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。
地址：http://amazeui.org/
3、sui
SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。 通过SUI，可以非常方便的设计和实现精美的页面。
地址：http://sui.taobao.org/
同时sui还有移动端版本msui，msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。
地址：http://m.sui.taobao.org/
4、FrozeUI
Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。
地址：http://frozenui.github.io/
5、uiKit
uiKit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。
地址：http://www.getuikit.net/
6、H-ui
H-ui是轻量级前端框架，简单免费，兼容性好，适用于中国网站。
地址：http://www.h-ui.net/
7、Weui
weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
地址：https://github.com/weui/weui
8、layui
Layui 诞生于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。
地址：http://www.layui.com/
9、YDUI Touch
YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高;使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局;实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换 px;自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI;
地址：http://www.yi.org/
10、后台UI开发框架 MuseUI
一款基于bootstrap风格，兼容于主流浏览器（包括IE6）的后端UI开发组件。
网站：http://git.oschina.net/muse/museui

② 前端开发框架有哪些

前端框架好不好用还是要看具体情况分析，我这里给你推荐几个常用的框架，可以按需使用。

1、vue-element-admin

一个基于vue2.0和Element的控制面板UI框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板已经非常成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

2、AdminLTE

非常流行的基于Bootstrap 3.x的免费的后台UI框架，这是一个非常老牌的后台管理系统模板，每个页面都是单独的html网页，适合前端入门新手用来做项目。

3、ant-design-pro

这个就不多说了，选择react技术栈的童鞋们必然离不开这个优秀开箱即用的中台前端/设计解决方案，文档齐全，组件丰富，一键生成模板，更支持开启复制粘贴模式哦。

4、ng2-admin

这是基于Angular 2、Bootstrap 4和webpack的后台管理面板框架，要收前面已经有了React和vue技术栈的模板，那怎么能少了ng的？虽然在国外用的比较多，国内较少使用，但丝毫不影响ng作为前端框架三巨头之一的地位。

9：material-dashboard

基于 Bootstrap 4 和 Material 风格的控制面板。Material Dashboard 是一个开源的 Material

Bootstrap Admin，其设计灵感来自谷歌的 Material Design 。

10：d2-admin

D2Admin 是一个完全 开源免费 的企业中后台产品前端集成方案，基于 vue.js 和 ElementUI 的管理系统前端解决方案 ，小于 60kb的本地首屏 js 加载,已经做好大部分项目前期准备工作

11：vuestic-admin

vuestic-admin管理台仪表盘是一个响应式的仪表盘模板，采用Bootstrap4和Vue.js构建。这个精美的管理台模板提供了自定义元素组件，如地图，聊天，个人资料卡，图标，进度条等，以及用于登录和注册的预建页面。

③ 前端常用的框架有哪些

常用的框架总结如下：

1. Bootstrap

Bootstrap是一款很受欢迎的前端框架，基于HTML、CSS、JavaScript设计的，简单灵活，使得Web开发更加快捷，Bootstrap中包含了丰富的Web组件和13个jquery插件，这些组件和插件可以快速的搭建一个漂亮和功能完备的网站，用户还可以根据自己的需求进行CSS变量的修改，扩展自己所需功能。

2. Angular

Angular是一款优秀的前端JS框架，已经被用于Google的多款产品中，其具有很多特性，如MVW、模块化、自动化双向数据绑定、语义化标签、依赖注入等，Angular可以为开发者呈现出一个更高层次的抽象来简化应用开发。

3. Backbone

Backbone是一种帮助开发重量级的javascript应用的框架，其文件本身很小，压缩后只有5.3KB，主要提供了models(模型)、collections(集合)、views(视图)三种结构，其中模型用于绑定键值数据和自定义事件，集合附有可枚举函数的丰富API，视图可以声明事件处理函数，并通过RESRful JSON接口连接到应用程序。Backbone依赖于underscore.js，其中包含很多工具方法、集合操作、js模板等。

4. React

React是一个用于构建用户界面的javascript库，主要用于构建UI，很多人认为React是MVC中的views(视图)，其采用声明式设计、JSX的语法扩展、强大的组件、单向响应的数据流，具有高效、灵活的性能，且代码逻辑简单，受到越来越多的人的关注和使用！

以上目前Web开发常用的框架，每个框架都有其不同的特点，且功能都很强大，想从事Web开发的可以了解一下北京尚学堂，从事编程教育多年，有优秀的师资力量，带给你更好的学习体验。

④ 2015年有哪些比较优秀的前端框架

作者：匿名用户
链接：http://www.hu.com/question/39377015/answer/81017680
来源：知乎
着作权归作者所有，转载请联系作者获得授权。

此榜单根据github上star数作为排名依据，一个人力量有限，如果收集有遗漏欢迎补充。
1、名称：Bootstrap
类别/语言：HTML、CSS、JavaScript
创建者： Twitter
人气：在Github上有91007 stars
描述：主流框架中毋庸置疑的老大，Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
核心概念/原则: RWD 和移动优先制。
浏览器支持： Firefox, Chrome, Safari, IE8+ (你需要 Respond.js for IE8)
响应式: Yes
模块化: Yes
官网地址：Bootstrap · The world's most popular mobile-first and responsive front-end framework.
Github地址：twbs/bootstrap · GitHub
2、名称：html5-boilerplate
类别/语言：HTML、CSS、JavaScript
创建者：Paul Irish
人气：在Github上有32,349 stars
描述：HTML5 Boilerplate 帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。
核心概念/原则：响应式
浏览器支持：Firefox, Chrome, Safari, IE8+,Edge,Opera
预处理器：None
响应式：Yes
模块化：Yes
官网地址：HTML5 Boilerplate: T
Github地址：h5bp/html5-boilerplate · GitHub
3、名称：Meteor
类别/语言：HTML、CSS、JavaScript
创建者：immir
人气：在Github上有31,092 stars
描述：Meteor是新一代的开发即时web应用的开源框架，它能帮助你在最少的时间内完成开发。
核心概念/原则：响应式
预处理器: Less
响应式: Yes
模块化: Yes
官网地址：Meteor
Github地址：meteor/meteor · GitHub
4、名称：Semantic UI
类别/语言：HTML、CSS、JavaScript
创建者: Jack Lukic
人气: 在Github上有22,325 stars
描述: “基于自然语言有效原则的UI组件框架”
核心概念/原则: 语义，标签的矛盾性、响应式
浏览器支持：Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10。
预处理器: Less
响应式: Yes
模块化: Yes
官网地址：Semantic UI
Github地址：Semantic-Org/Semantic-UI · GitHub
5、名称：Foundation
类别/语言：HTML、CSS、JavaScript
创建者: ZURB
人气: 在Github上有22,206+ stars
描述: “世界上最优秀的响应式前端框架”
核心概念/原则: RWD 、手机优先、语义的
浏览器支持： Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
预处理器: Sass
响应式: Yes
模块化: Yes
官网地址：Foundation | The most advanced responsive front-end framework in the world.
Github地址：zurb/foundation-sites · GitHub

6、名称：Materialize
类别/语言：CSS
创建者：Google
人气：在Github上有15,288stars
描述：Materialize是一个个基于材料设计的一个现代化的响应式前端框架。他们做了最繁重的工作，为您提供默认的样式，结合了您的自定义组件。此外，他们还改进动画和过渡，为开发人员提供流畅的体验。
核心概念/原则：响应式
预处理器：Sass
响应式：Yes
模块化：Yes
官网地址：Documentation
Github地址：Dogfalo/materialize · GitHub
浏览器支持：Chrome 35+, Firefox 31+, Safari 7+, IE 10+
7、名称：Pure
类别/语言：CSS
创建者: Yahoo
人气: 在Github上有13,161 stars
描述: “您可以在每一个web项目中使用的一组小的和响应式的CSS模块”
核心概念/原则:SMACSS,极简的.
浏览器支持：Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
预处理器: None
响应式: Yes
模块化: Yes
官网地址：http://purecss.io/
Github地址：yahoo/pure · GitHub
8、名称：Vue
类别/语言：CSS、JavaScript
创建者：尤雨溪
人气：在Github上有12,214 stars
描述：Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
核心概念/原则：响应式
浏览器支持：Firefox, Chrome, Safari, IE9+，Android 4.2+，iOS 7+
预处理器：None
响应式：Yes
模块化：Yes
官网地址：vue.js
Github地址：vuejs/vue · GitHub
9、名称：Skeleton
类别/语言：CSS、JavaScript
创建者：Dave Gamache
人气：在Github上有10,622stars
描述：Skeleton 是一个小的 JS 和 CSS 文件的集合,可帮你快速开发漂亮的网站,适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。
核心概念/原则：响应式
浏览器支持：Firefox, Chrome, Safari, IE10+,Opera
预处理器：None
响应式：Yes
模块化：Yes
官网地址：Skeleton: Responsive CSS Boilerplate
Github地址：dhg/Skeleton · GitHub
10.名称： Amaze UI
类别/语言：HTML、CSS、JavaScript
创建者：云适配
最后更新时间：2015年12月
人气：在Github上有6425 stars
描述：国内首个开源HTML5跨屏前端框架，中文排版支持更优、本土化组件丰富。
并在2015年11月推出基于 React.js 的专属移动端 Web 组件库Amaze UI touch。
核心概念/原则：组件化、移动优先、轻量级、高性能。
浏览器支持： Firefox, Chrome, Safari, IE8+
响应式: Yes
模块化: Yes
官网地址：Amaze UI | 中国首个开源 HTML5 跨屏前端框架
Github地址：amazeui/amazeui · GitHub
11、名称：UIkit
类别/语言：HTML、CSS、JavaScript
创建者: YOOtheme
人气: 在Github上有6,050+ stars
描述: “一个轻量级的和模块化的前端框架,用于快速开发和功能强大的web接口。”
核心概念/原则:RWD, 手机优先.
预处理器: Less, Sass
响应式: Yes
模块化: Yes
官网地址：UIkit
Github地址：uikit/uikit · GitHub
浏览器支持： Chrome, Firefox, Safari, IE9+
12、名称：Yui
类别/语言：CSS、JavaScript
创建者：Yahoo
人气：在Github上有3,200+ stars
描述：Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证
核心概念/原则：响应式
预处理器: None
响应式：Yes
模块化：Yes
官网地址：http://yuilibrary.com/
Github地址：yui/yui3 · GitHub
浏览器支持：Firefox, Chrome, Safari, IE10+,Opera
13.名称：kissy
类别/语言： JavaScript
创建者：淘宝前端
最后更新时间：2015年7月
人气：在Github上有2035 stars
描述：KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。
框架大小: 37 KB
核心概念/原则: 模块化，跨终端，高扩展性
模块化: Yes
官网地址：KISSY - A Powerful JavaScript Framework
Github地址：kissyteam/kissy · GitHub
14.名称：MUI
类别/语言： HTML、CSS、JavaScript
创建者：Dclould
最后更新时间：2016年1月
人气：在Github上有2012 stars
描述：MUI-最接近原生App体验的前端框架框架。
核心概念/原则: 多端发布、高性能
响应式: NO
模块化: Yes
官网地址：MUI-最接近原生APP体验的高性能前端框架
Github地址：dcloudio/mui · GitHub
15.名称：Arale
类别/语言： JavaScript
创建者：支付宝前端
最后更新时间：2015年7月
人气：在Github上有1252 stars
描述：Arale 是一个开放、简单、易用的前端基础类库。
框架大小:未知
核心概念/原则: 开放、简单、易用
浏览器支持：Firefox, Chrome, Safari, IE6+
响应式: Yes
模块化: Yes
官网地址：Arale - 随心构建互联网应用
Github地址：aralejs/aralejs.org · GitHub

16.名称：JX
类别/语言：Javascript
创建者：腾讯前端
最后更新时间：2015年12月
人气：在Github上有952 stars
描述：JX 是模块化的非侵入式Web前端框架，特别适合构建和组织大规模、工业级的Web App。
框架大小: 未知
核心概念/原则: 保持最优执行效率
浏览器支持： 兼容主流浏览器
模块化: Yes
官网地址：JX - 腾讯 Web 前端开发框架
Github地址：AlloyTeam/JX · GitHub
17.名称：GMU
类别/语言：HTML、CSS、JavaScript
创建者：网络前端
最后更新时间：2015年12月
人气：在Github上有940stars
描述：GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件! Web App。
核心概念/原则: 简单易用、轻量级
模块化: Yes
官网地址：http://gmu..com/
Github地址：fex-team/GMU · GitHub
18.名称：ZUI
类别/语言： HTML、CSS、JavaScript
创建者：蝉道
最后更新时间：2015年7月
人气：在Github上有616 stars
描述：开源HTML5前端框架
核心概念/原则:简单易用、轻量级、易于定制
浏览器支持：未知
官网地址：ZUI - 开源HTML5跨屏框架
Github地址：easysoft/zui · GitHub
19.名称：Clouda Touch.js
类别/语言：JavaScript
创建者：网络云
人气：在Github上有387 stars
描述：Touch.js是移动设备上的手势识别与事件库,也是在网络内部广泛使用的开发。
核心概念/原则: 无入侵设计、媲美原生的交互、极简的API
模块化: Yes
官网地址：Touch.js
Github地址：Clouda-team/touch.code..com · GitHub
20.名称：Arkui
类别/语言：HTML、CSS、JavaScript
创建者：豆瓣
人气：在Github上有129 stars
模块化: Yes
官网地址：arkui
Github地址：mockee/arkui · GitHub

⑤ 几个Web前端开发框架的比较

Bootstrap

Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长，你可以放心的选择这个框架，而不必担心项目会失败，因为具有广泛使用基础的框架，不太可能被抛弃。

UIkit说明

UIkit成功应用在许多WordPress主题中。它提供了灵活和强大的手动定制机制（以前版本的框架还提供了高级GUI定制程序）。

什么是最适合你的框架？

在选择框架时，可以从以下几个方面考虑：

如果你还不确定使用哪个框架，那么可以采用混合搭配的方式。当某个特定的框架不能满足你的需求时，可以混合使用两个或多个项目的组件。

最后值得一提的是，现在Flexbox和Grid Layout在主流浏览器的最新版本中得到很好的支持，比以往任何时候都更容易构建复杂的布局。这可能会鼓励更多的开发人员放弃前端框架，从头开始编写他们自己想要的布局。

来源：网页链接

⑥ 前端开发的学的框架都有什么

蜗牛学院在这里给大家整理了一份web前端开发完整的学习路线，框架在第三阶段中，希望可以帮到你~

第一阶段：专业核心基础

阶段目标：

1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2. 熟练运用HTML+CSS特性完成页面布局。

4. 熟练应用CSS3技术，动画、弹性盒模型设计。

5. 熟练完成移动端页面的设计。

6. 熟练运用所学知识仿制任意Web网站。

7. 能综合运用所学知识完成网页设计实战。

知识点：

1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

第二阶段：Web后台技术

阶段目标:

1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2. 熟练掌握JavaScript的基本数据类型和变量的概念。

3. 熟练掌握JavaScript中的运算符使用。

4. 深入理解分之结构语句和循环语句。

5. 熟练使用数组来完成各种练习。

6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7.DOM和BOM实战练习和H5新特性和协议的学习。

知识点：

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

第三阶段：数据库和框架实战

阶段目标：

1. 综合运用Web前端技术进行页面布局与美化。

2. 综合运用Web前端开发框架进行Web系统开发。

3. 熟练掌握Mysql、Mongodb数据库的发开。

4. 熟练掌握vue.js、webpack、elementui等前端框技术。

5. 熟练运用Node.js开发后台应用程序。

6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

知识点：

1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。

2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

第四阶段：移动端和微信实战

阶段目标：

1.熟练掌握React.js框架，熟练使用React.js完成开发。

2.掌握移动端开发原理，理解原生开发和混合开发。

3.熟练使用react-native和Flutter框架完成移动端开发。

4.掌握微信小程序以及了解支付宝小程序的开发。

5.完成大型电商项目开发。

知识点：

1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Rex基本概念。练使用react完成项目开发、掌握Rex中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。

⑦ 开箱即用的React前端框架——ReactAdmin

ReactAdmin是一个Github上免费开源的前端框架（不是组件库，也不是模板，它是一个框架），采用es6、React和Material Design构建基于Rest/GraphQl API的Web应用程序。在React上star数超过8k。

https://github.com/marmelab/react-admin

ReactAdmin不是个UI组件库，它是一个前端框架，因此你基本上基本上只要按照官网的文档进行一些配置等然后在其基础上开发自己的应用程序即可，可谓开箱即用，意识就是都给你集成好了。

你可以直接使用以下命令进行安装（这是安装react-admin及所有的依赖）

下面我们看一下官网提供的一个最简单的示例，你可以在它的主仓库中获取

我们进入到simple中，大致看一下代码和目录结构

我们安装一些依赖然后启动

成功后打开浏览器，这是使用react-admin最简单的一个例子

一图了解

由于ReactAdmin是一个非常复杂的框架，你可以参考提供的文档，我这里就不详细介绍了，感兴趣的可以直接看文档，文档是英文的，所有的说明都在文档中。

https://marmelab.com/react-admin/

ReactAdmin它是一个集合，它将一些前端开发所需要的东西都集成了进来，然后做好，我们直接使用即可，不仅仅适合个人学习，也适合通过它来构建企业级的应用。我们不仅仅是拿过来直接用，我们可看一看别人是怎么实现这样的一个框架的，从源码去学习会更快的提升自己的水平，希望对你有所帮助！