前端的技術日漸更新，最近得空，花了一上午的時間，將前端常見的UI框架總結了一下，在開發的過程之中，有了這些，不斷能夠提高自己的工作效率，還可以在工作之余了解更多。希望大家喜歡。 1.Layui 官方網址：http://www.layui.com/ Layui是一款采用自身模塊規范編寫的國產前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。Layui還很年輕，首個版本發布于2016年金秋，她區別于那些基于MVVM底層的UI框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。 經典模塊化前端框架 2.NEC： 官方網址：http://nec.netease.com/case 你是否常常碰到以下問題：你總是看不懂他寫的代碼，或者讀起來很吃力；你需要改他的代碼卻無從下手，或總是要去問他這里是什么改了會不會影響其他代碼；你和他一起開發一個產品，你總是怕代碼和他有沖突或互相影響；你的代碼在多次維護任務之后變得越來越臃腫，越來越難以維護，解決以上問題只需一種方法——讀我們的規范！ 國產web前端框架推薦之–NEC 3：amaze UI 官方網址：http://amazeui.org/ 之前公司的網站被黑客攻擊之后，整個網站的東西都用不了了，處于丟失和癱瘓的狀態，樓主毫不猶豫在這個網站上找了一個框架，僅僅兩三天的時間，就成功挽救了這一糟糕的局面，還是要感謝我們這強大的框架，妹子UI,適配pc端和移動端，功能齊全，網站開發什么的，都SOeasy 中國首個開源 HTML5 跨屏前端框架. 4.NEJ 官方網址：http://nej.netease.com/ NEJ全稱：Nice Easy Javascript 是由網易前端組工程師們發起創建的簡潔，美觀，真正的跨平臺web前端開發框架；在適配性上支持桌面及移動平臺、瀏覽器及混合應用開發，補丁模式無縫擴展適配平臺，配置方式靈活定制目標平臺 5.bootstrap 框架官方網址：http://www.bootcss.com/ 這個我就不多說了，大多數人都在用這個框架來開發，官方文檔的API完整可靠，還有各種Bootstrap相關優質項目推薦，前端開發首選框架 簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。 6：Foundation 官方網址：http://www.foundcss.com/ Foundation 是一個易用、強大而且靈活的響應式前端框架，用于構建基于任何設備上的響應式網站、 Web應用和電子郵件。結構語義化、移動設備優先、完全可定制。 響應式前端框架 7.Jquery代碼庫 官方網址：http://www.jqueryui.org.cn/ 基于Jquery的開源網頁用戶界面代碼庫： 8.jQuery插件庫 官方網址：http://www.jq22.com/ 史上最全的jQuery效果，包括了開發所需要的所有需求的demo，如果有不會的東西，就來jQuery插件庫吧，這里總有一些你想要的，還在等什么？ 9.FrozenUI 官方網址：http://frozenui.github.io/ 隨心所用的樣式組件，更顯靈動的JS插件，酷炫好玩的案例秀，提供的Animationcase，把業務上有趣好玩的案例沉淀下來，幫助日后能更快速找到設計靈感。FrozenUI是一個開源的簡單易用，輕量快捷的移動端UI框架。基于手Q樣式規范，選取最常用的組件，做成手Q公用離線包減少請求，升級方式友好，文檔完善，目前全面應用在騰訊手Q增值業務中。 移動端開發專用框架： 10：SUI 官方網址：http://m.sui.taobao.org/ SUI是一套基于bootstrap開發的前端組件庫，同時她也是一套設計規范。通過SUI，可以非常方便的設計和實現精美的頁面。同時sui還有移動端版本msui，msui是阿里巴巴共享業務事業部UED團隊的作品。目的是為了手機H5頁面提供一個常用的組件庫，減少重復工作。 搭建手機H5應用： 11:AUI 官方網址：http://www.auicss.com/ AUI2.0是一套全新的AUI框架，在1.X基礎上進行了重新架構。結合實際項目出發，站在開發者和項目的角度，重新定義AUI框架。在2.0中使用了大量彈性響應式布局，采用容器+布局結構+控件的嵌套形式，方便開發者快速布局樣式。我們充分吸取了AUI使用者的反饋意見和借鑒了市場上其他優秀UI框架，完成了2.0版本的開發。2.0遵循GoogleMaterial 設計規范，使用MIT開源協議。 12:MUI： 官方網址：http://dev.dcloud.net.cn/mui/ 最接近原生APP體驗的高性能前端框架,相信這個大家都不陌生：鑒于之前的很多前端框架（特別是響應式布局的框架），UI控件看起來太像網頁，沒有原生感覺，因此追求原生UI感覺也是我們的重要目標MUI以iOS平臺UI為基礎，補充部分Android平臺特有的UI控件 13:Semantic UI 官方網址：http://www.semantic-ui.cn/ Semantic作為一款開發框架，幫助開發者使用對人類友好的HTML語言構建優雅的響應式布局。更快地設計賞心悅目的網站 14.Aliceui 官方網址：http://www.oschina.net/p/aliceui?fromerr=mgWZvlr0 Aliceui是支付寶的樣式解決方案，是一套精選的基于 spm 生態圈的樣式模塊集合，是 Arale 的子集，也是一套模塊化的樣式命名和組織規范，是寫 CSS 的更好方式。 15.H-ui 官網地址：http://www.h-ui.net/ H-ui是輕量級前端框架，簡單免費，兼容性好，適用于中國網站。H-ui是一個相對成長比較慢的前端框架，相比目前行業眾多框架還有很多不足。但初心不改，實實在在把事做好，做用戶最喜歡的框架。 16.Weui 官網地址：https://github.com/weui/weui weUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress、toast、article、actionsheet、icon等各式元素。 17.YDUI Touch 官網地址：http://www.ydui.org/ YDUI Touch 專為移動端打造，在技術實現、交互設計上兼容主流移動設備，保證代碼輕、性能高;使用 Flex 技術，靈活自如地對齊、收縮、擴展元素，輕松搞定移動頁面布局;實現強大的屏幕適配布局，等比例適配所有屏幕。什么？用得不開心？輕松切換 px;自定義JavaScript組件、Less文件、Less變量，定制一份屬于自己的YDUI; 一只注重審美，且性能高效的移動端&微信UI。 18.ZUI 官方網址：http://zui.sexy/ 簡友補充的，現在添上，一個基于 Bootstrap 深度定制開源前端實踐方案，幫助你快速構建現代跨屏應用。基于 Flex 設計，支持移動端全部主流瀏覽器，支持 Android 微信內置瀏覽器 開源html5跨屏框架 19：EasyUI 官方網址：http://www.jeasyui.net/ easyui是一種基于jQuery的用戶界面插件集合。為創建現代化，互動，JavaScript應用程序，提供必要的功能。使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。完美支持HTML5網頁的完整框架。節省您網頁開發的時間和規模。 21：pure 官方網址：http://purecss.org/layouts/ Pure精心設計，只為可以在任何Web項目中使用。為了例證這一點，我們制作了如下幾個模板。這些模板都是響應式的，并且沒有使用任何JavaScript。