進階攻略|前端最全的框架總結

前端的技術日漸更新,最近得空,花了一上午的時間,將前端常見的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。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,431評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,637評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,555評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,900評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,629評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,976評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,976評論 3 448
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,139評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,686評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,411評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,641評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,129評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,820評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,233評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,567評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,362評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,604評論 2 380

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,760評論 25 708
  • 2017年4月10日 相濡以沫 1、新鮮感不止于人與人之間,新添的裝備,今天一有空就開始研究說明書和各種功能鍵,愛...
    滋滋味味閱讀 182評論 0 0
  • 學習材料: 項目PrettyGirls-master+項目RxjavaRetrofitDemo-master-ma...
    簡書_小馬閱讀 613評論 0 0
  • 泛型的本質是參數化類型,即將操作數的數據類型指定為一個參數。當這種參數類型用在類中時,就稱該類為泛型類。泛型類的格...
    尉昌達閱讀 373評論 0 0
  • 距離3月份來到米茲視覺,已經過去了半年。從最初的廣告行業菜鳥,漸漸的了解了一些廣告營銷制作的知識,也寫了大大小小十...
    逆風飛翔的風箏閱讀 1,641評論 0 5