本文做者祈澈姑娘,轉載請聲明,不足之處,歡迎補充。
css
前端的技術日漸更新,最近得空,花了一上午的時間,將前端常見的UI框架總結了一下,在開發的過程之中,有了這些,不斷可以提升本身的工做效率,還能夠在工做之餘瞭解更多。但願你們喜歡。前端
1.Layuijquery
官方網址:http://www.layui.com/git
Layui是一款採用自身模塊規範編寫的國產前端UI框架,遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,拿來即用。從核心代碼到API的每一處細節都通過精心雕琢,很是適合界面的快速開發。,從核心代碼到API的每一處細節都通過精心雕琢,很是適合界面的快速開發。Layui還很年輕,首個版本發佈於2016年金秋,她區別於那些基於MVVM底層的UI框架,卻並不是逆道而行,而是信奉返璞歸真之道。準確地說,她更可能是爲服務端程序員量身定作,你無需涉足各類前端工具的複雜配置,只需面對瀏覽器自己,讓一切你所須要的元素與交互,從這裏信手拈來。程序員
2.NEC:github
官方網址:http://nec.netease.com/caseweb
你是否經常碰到如下問題:你老是看不懂他寫的代碼,或者讀起來很吃力;你須要改他的代碼卻無從下手,或老是要去問他這裏是什麼改了會不會影響其餘代碼;你和他一塊兒開發一個產品,你老是怕代碼和他有衝突或互相影響;你的代碼在屢次維護任務以後變得愈來愈臃腫,愈來愈難以維護,解決以上問題只需一種方法——讀咱們的規範!編程
3:amaze UIbootstrap
官方網址:http://amazeui.org/瀏覽器
以前公司的網站被黑客攻擊以後,整個網站的東西都用不了了,處於丟失和癱瘓的狀態,樓主堅決果斷在這個網站上找了一個框架,僅僅兩三天的時間,就成功挽救了這一糟糕的局面,仍是要感謝咱們這強大的框架,妹子UI,適配pc端和移動端,功能齊全,網站開發什麼的,都SOeasy
4.NEJ
官方網址:http://nej.netease.com/
NEJ全稱:Nice Easy Javascript 是由網易前端組工程師們發起建立的簡潔,美觀,真正的跨平臺web前端開發框架;在適配性上支持桌面及移動平臺、瀏覽器及混合應用開發,補丁模式無縫擴展適配平臺,配置方式靈活定製目標平臺
5.bootstrap
框架官方網址:http://www.bootcss.com/
這個我就很少說了,大多數人都在用這個框架來開發,官方文檔的API完整可靠,還有各類Bootstrap相關優質項目推薦,前端開發首選框架
6:Foundation
官方網址:http://www.foundcss.com/
Foundation 是一個易用、強大並且靈活的響應式前端框架,用於構建基於任何設備上的響應式網站、 Web應用和電子郵件。結構語義化、移動設備優先、徹底可定製。
7.Jquery代碼庫
官方網址:http://www.jqueryui.org.cn/
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頁面提供一個經常使用的組件庫,減小重複工做。
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;
18.ZUI
官方網址:http://zui.sexy/
簡友補充的,如今添上,一個基於 Bootstrap 深度定製開源前端實踐方案,幫助你快速構建現代跨屏應用。基於 Flex 設計,支持移動端所有主流瀏覽器,支持 Android 微信內置瀏覽器
19:EasyUI
官方網址:http://www.jeasyui.net/
easyui是一種基於jQuery的用戶界面插件集合。爲建立現代化,互動,JavaScript應用程序,提供必要的功能。使用easyui你不須要寫不少代碼,你只須要經過編寫一些簡單HTML標記,就能夠定義用戶界面。完美支持HTML5網頁的完整框架。節省您網頁開發的時間和規模。
21:pure
官方網址:http://purecss.org/layouts/
Pure精心設計,只爲能夠在任何Web項目中使用。爲了例證這一點,咱們製做了以下幾個模板。這些模板都是響應式的,而且沒有使用任何JavaScript。
文末彩蛋:前端框架源碼:http://www.mycodes.net/169/
各類模板應有盡有,提升開發的效率,升職加薪不是夢。
本文分享自微信公衆號 - 編程微刊(wangxiaoting678)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。