18個國內top HTML、CSS、JavaScript 開源項目-php教程-PHP中文網

如果你是前端開發人員，那麼HTML、CSS 和 JavaScript 是三項必備的基礎技能必須要掌握的。當然我們也需要運用的很熟練。透過了解當下火熱的開源專案不乏為最佳學習姿勢。本文盤點國內評分最高且收藏量超過 100 的前端技術開源項目，希望可以幫助更多的開發者擴展學習。

1.極簡模組化前端UI框架Layui

評分：9.3；收藏量：873

授權協議：MIT

開發語言：JavaScript 、HTML/CSS

作業系統：跨平台

原始碼位址： https://gitee.com/sentsin/layui

Layui 是一款採用自身模組規格編寫的情懷型前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。 Layui 首個版本發佈於2016年金秋，她有別於那些基於MVVM底層的UI框架，卻並非逆道而行，而是信奉返璞歸真之道。確切地說，她更多是為服務端程式設計師量身定做，你無需涉足各種前端工具的複雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這裡信手拈來。

2.JavaScript 圖表庫ECharts

評分：8.9；收藏：2448

授權協定：BSD

#開發語言：JavaScript

作業系統：跨平台

原始碼位址： https://gitee.com/echarts/echarts

ECharts是一款由百度前端技術部開發的，基於Javascript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。提供大量常用的資料視覺化圖表，底層基於ZRender（一個全新的輕量級canvas類別庫），創建了座標系，圖例，提示，工具箱等基礎元件，並在此上建立折線圖（區域圖）、長條圖（長條圖）、散佈圖（氣泡圖）、圓餅圖（環形圖）、K線圖、地圖、力導向佈局圖以及和弦圖，同時支持任意維度的堆積和多圖表混合展現。

3.國產跨螢幕響應式前端框架拼圖Pintuer

評分：8.7；收藏：220

授權協定：Apache

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

#原始碼位址： https://gitee.com/pintuer/pintuer

#拼圖Pintuer.com：國內優秀的HTML、CSS、JS跨螢幕響應式開源前端框架，使用最新瀏覽器技術，為快速的前端開發提供一系統的文字、圖示、媒體、表格、表單、按鈕、選單、網格系統等樣式工具包，佔用資源小，使用拼圖可以快速建立簡潔、優雅且自動適應手機、平板、桌上型電腦等裝置的前端介面，讓前端開發像玩遊戲一下快樂又輕鬆。

拼圖前端框架在傳統CSS框架的基本上，增加了HTML5、CSS3、JS等技術組合應用，應用於最新的瀏覽器技術，同時兼容較早的瀏覽器，新舊結合，承前啟動後，開發者只需把框架文件引入到專案中，就可以初現快速的共同開發，改變以往建立PC網站同時，再建立手機網站的局面，實現一站響應所有設備，大大提高了開發效率。

4.輕量級Material Design 前端框架MDUI

評分：8.6；收藏：215

授權協定：MIT

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

#原始碼位址： https://github.com/zdhxiong/mdui

## MDUI 是一個輕量級的Material Design 前端框架，對照著Material Design 文件進行開發，爭取1:1 實現Material Design 中的元件。

多主題支援：MDUI 有 19 種主色、 16 種強調色、和一種夜間主題。只需新增一個 CSS 類別即可實現主題的切換。

輕量級：包含所有主題的CSS 檔案僅26.4KB minified + gzip，JavaScript 檔案僅12KB minified + gzip，且沒有任何依賴

回應式：行動優先，可適配所有螢幕。

5.Win10 風格的前端響應式UI 框架Win10-UI

評分：8.5；收藏量：170

授權協定：SATA

#開發語言：JavaScript、HTML/CSS

作業系統：跨平台

原始碼位址： https://github.com/yuri2peter/win10-ui

#Win10-UI是一款win10風格的後台UI框架。它使用了豐富的win10桌面元素，包括桌面圖示、視窗化子頁面管理、開始功能表、動態小磁貼等元件，相容於主流現代瀏覽器及行動裝置的螢幕尺寸，適合快速開發後台管理系統的前端介面。

Win10-UI採用傳統UI框架的渲染設計，無序記住繁複的js程式碼，只需要套用html結構就可以輕鬆渲染出桌面元素。同時也保留了主動呼叫的API，讓高階開發者可以定義UI的細節。它並沒有定義太多的“規則”，你完全可以用css、js擴充它的功能，把它打造成屬於你的獨一無二的後台UI。

6.Node 終端介面庫blessed-contrib

評分：8.5；收藏量：125

授權協議：MIT

開發語言：JavaScript

作業系統：跨平台

原始碼位址： https://github.com/yaronn/blessed-contrib

#blessed-contrib是使用Node.js 建立終端應用程式介面的函式庫。

7.基於React 和Redux 的現代內容編輯器ORY Editor

評分：8.3；收藏量：109

授權協議：AGPL

開發語言：JavaScript

作業系統：跨平台

源碼位址： https://github.com/ory/editor

ORY是一家建構和維護開發者工具的公司，ORY Editor 是一個用於Web 的智慧、可擴充和現代的編輯器（「WYSIWYG」），使用React 編寫。如果你厭倦了 contenteditable 的限制，這將是不錯的選擇。

ORY Editor 可用於建立網站，與 Squarespace 類似，不過它可以離線運行，透過它創建的網站會儲存在裝置上，還可以創建自己的設計和插件。

8.行動應用動畫效果框架Lottie

評分：8.3；收藏：317

授權協定：Apache

#開發語言：Java、Objective-C、JavaScript

作業系統：Android

原始碼位址：

#Android : https://github.com/airbnb/ lottie-android

iOS : https://github.com/airbnb/lottie-ios

React Native : https://github.com/airbnb/lottie-react-native

Lottie 是Airbnb 開發的一款能夠為原生應用程式添加動畫效果的開源工具。 Lottie 目前提供了 iOS、Android 和 React Native 版本，能夠即時渲染 After Effects 動畫特效。

目前，Lottie支援路徑修剪、遮罩、遮蓋等操作。另外還有一個可選的快取機制，對那些頻繁使用的東西能夠更快載入。這款應用程式的目標就是幫助開發者和動畫師能夠更輕鬆的為應用程式創建動畫，從而整體提升互動因素。

9.主題最佳化套件JQuery EasyUI 1.5.x Of Insdep Theme

評分：8.3；收藏量：101

#授權協議：GPL

開發語言：JavaScript

作業系統：跨平台

原始碼位址： https://gitee.com/weavors/JQuery-EasyUI-1.5.x- Of-Insdep-Theme

Insdep theme是基於EasyUI 1.5.x 的一款免費的美化主題包，擁有百度編輯器、cropper、Highcharts、justgage、plupload等各類適應本主題的第三方插件美化補丁。並且各類常用Jquery插件正在美化中。後期會提供更多的主題、元件及第三方外掛美化樣式。

10.基於Ueditor 的現代化富文本編輯器Neditor

評分：8.3；收藏量：503

授權協議：MIT

開發語言：JavaScript

作業系統：跨平台

原始碼位址： https://gitee.com/notadd/neditor

百度前端團隊做了許多努力，現在Ueditor 是公認最好用的中文富文本編輯器。但是隨著時間的推移，大家感覺百度編輯並不是那麼漂亮。於是我們對 Ueditor 進行修改，有了現在的 Neditor 。

11.基於Vue.js 的UI 元件庫iView

評分：8.3；收藏量：475

##授權協定：MIT

開發語言：HTML/CSS

作業系統：跨平台

原始碼位址： https://gitee.com/icarusion/iview

iView是一套基於Vue.js 的UI 元件庫，主要服務於PC 介面的中後台產品。

特性

高品質、功能豐富

#友善的API ，自由靈活地使用空間

使用單檔案的Vue 元件化開發模式

基於npm + webpack + babel 開發，支援ES2015

12.基於Vue 2.0 的元件庫Element

評分：8.2；收藏量：609

授權協議：MIT

開發語言：JavaScript

#作業系統：跨平台

原始碼位址： https://github.com/ ElemeFE/element

Element，一套為開發者、設計師和產品經理準備的基於Vue 2.0 的元件庫，提供了配套設計資源，幫助你的網站快速成型。由餓了麼公司前端團隊開源。

13.HTML5 跨螢幕前端框架Amaze UI

評分：8.1；收藏量：1213

授權協定：MIT

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

源碼位址： https://gitee.com/amazeui/amazeui

Amaze UI採用國際最前沿的「組件式開發」以及「行動優先」的設計理念，基於其豐富的組件，開發者可透過簡單拼裝即可快速構建出HTML5網頁應用，上線僅半年，Amaze UI成為了國內最受歡迎的前端框架，目前在Github上收穫Star數近萬，服務全球50W開發者。

14.專為微信設計的UI 函式庫WeUI

評分：7.7；收藏量：2002

授權協定：MIT

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

#WeUI 是由微信官方設計團隊專為微信行動Web 應用程式設計的UI 函式庫。

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，為微信 Web 開發量身設計，可以讓使用者的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素。

15.儀表板WebApp 範本AdminLTE

評分：7.6；收藏量：136

授權協定：MIT

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

原始碼位址： https://github.com/almasaeed2010/AdminLTE/

AdminLTE 是受歡迎的開源的管理儀錶板和控制面板的WebApp模板。它是基於Bootstrap 3的CSS框架，反應靈敏的HTML模板。利用所有Bootstrap的元件對大部分使用外掛程式進行設計和調整風格，創造出可以用作後端應用程式的使用者介面一致性設計。 AdminLTE是基於模組化設計，很容易在其之上自訂和重製。

16.web上線部署系統工具Walle

#評分：7.4；收藏量：359

授權協定：MIT

#開發語言：PHP、HTML/CSS

作業系統：跨平台

Walle 一個web部署系統工具，配置簡單、功能完善、介面流暢、開箱即用！支援git、svn版本管理，支援各種web程式碼發布，PHP，Python，JAVA等程式碼的發布、回滾，可以透過web來一鍵完成。

17.網站管理後台範本Charisma

#評分：7.4；收藏：1055

授權協定：Apache

開發語言：HTML/CSS

作業系統：跨平台

Charisma 是基於Twitter Bootstrap 製作的響應式網站管理後台模板，包含9套漂亮的主題。