前端框架集合

① 前端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它是一個集合，它將一些前端開發所需要的東西都集成了進來，然後做好，我們直接使用即可，不僅僅適合個人學習，也適合通過它來構建企業級的應用。我們不僅僅是拿過來直接用，我們可看一看別人是怎麼實現這樣的一個框架的，從源碼去學習會更快的提升自己的水平，希望對你有所幫助！