10大html5前端框架

Bootstrap

首先說 Bootstrap,估計你也猜到會先說或者一定會有這個( 呵呵了 ),這是說明它的強大之處,擁有框架一壁江山的勢氣。自己剛入道的時候本著代碼任何一個字母都得自己敲出來擋我者廢的決心,來讓自己成長。結果受到周圍各 種基友的引誘開始了 Bootstrap 旅程。本人雖然是個設計+前端的萬里有一的人才,但是老天只讓我會用 PS 和各種設計工具卻不給我跟設計妹子一樣的審美,所以這也是我最初選擇 Bootstrap 的原因之一,它讓我做出來的東西好歹能在妹子面前裝個逼,不過時間長了難免覺得 Bootstrap 美的讓人煩躁, 但好在它的每個版本都會有很大的改變,不會讓人覺得自己做的網站會跟很多網站撞臉。Bootstrap 的用法及其簡單( 這也可能就是 Bootstrap 作者閱攻城士無數,了解他們痛的結果 ),以至于是個小前端都可以快速上手,幾乎沒什么學習成本。

官網:http://getbootstrap.com/

Github:https://github.com/twbs/bootstrap/

作者:Mark?Otto?和Jacob?Thornton?Star:93,112

總結:Bootstrap 最大的優勢就是它非常流行,流行就代表你有問題就有很多人幫你解決問題,就代表裝逼它就是利器,還有就是界面比較和諧,容易上手,關注它的童鞋應該發現最 新 V4 版也開始支持 FlexBox 布局,這是非常好的升級體驗。 劣勢是 class 命名不夠語義化,并且各種縮寫,以至于我離了文檔就是個菜,最近開始整混合 APP,選框架的時候首選就是它,但之前搞 PC 一直沒注意,后來搞混合右鍵屬性看它的時候,瞬間一陣涼風襲來,Bootstrap 好小,小到我只好選擇別的框架。

AUI

第三個是最近剛起來的AUI,雖然作者聲稱是專為APICloud開發者設計的一套UI框架,但實際它還是解決了很多移動前端開發的普遍問題,是主 要面向混合開發的 CSS 框架。看起來作者比較猖狂,各種高級 CSS3 遍地使用,這讓我也不得不去查查這些個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性,哈哈了一頓激動從前輩手上大膽認識了幾個好東西,并且框架還提供了聊天界面、計數列表等組件,解決了很多 復雜的讓我罵娘的布局,現在可以直接拿走就用。

Github:https://github.com/liulangnan/aui

官網:http://www.auicss.com/

作者:流浪男?Star:92

總結:這個框架對我來說有個優點就是純 CSS 框架,自己以前也就用過 Pure,自己有點 JS 能力,如果不是復雜的效果,找個純 CSS 框架自己隨便改改就可以,而現在 CSS3 也已經能夠做到動畫,效率、質量、高效全兼顧,所以還是選擇了這種 CSS 框架。有一點覺得不滿的是這框架的文檔真的好那什么,說好的高大上呢。

Amaze?UI

第二個介紹的是妹子UI,最初使用它是因為本尊遇到了一個愛糾結細節設計士,有一次她跟我的字體較上真了,結果一句頂萬句的 BOOS 夸了她,我只好根據她的想法去解決,結果最后找到了Amaze UI 框架( 我不介意你叫我懶淫 ),按照官方的話說就是 "基于社區開源項目構建的一個跨屏前端框架,以移動優先,從小屏到大屏,最終實現所有屏幕適配,適應移動互聯潮流" 。但其實我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。

官網:http://amazeui.org/

Github:https://github.com/amazeui/amazeui

所屬公司:云適配?Star:6710

總結:Amaze?UI?總的來說就是加入更多符合中國市場特性的元素,框架對跨屏、適配都做了的比較好的處理并且準備一了一系列的常用的網頁組 件,為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。,框架還對中文排版優化,兼容中國本土主流瀏覽器、輕量化,不僅適用于桌面端,還 更更適合移動端、包含一些封裝好的Widgets。不過自也就我感覺?Amaze?UI?文檔是否有點太那什么了,比如?“人們不會在乎jQuery的那 點流量。”,說實的在這真沒啥,不過我從來不會說出來(?哈哈?),代碼和設計上感覺沒太多突出的點。

Frozen?UI

有段時間看到 QQ 瞬間高大上了,后來四處打聽,原來 QQ 客服端也用了 混合開發,其中QQ會員前端用的是 Frozen UI,并且這套框架開源,欣喜若狂耐不住心里的寂寞直接上手試了一遍,初體驗感覺基礎樣式效果簡單色調清爽,有個比較活躍的社區所以組件什么的也比較豐 富。

Github:https://github.com/frozenui/frozenui

官網:http://frozenui.github.io/

作者:?QQVIP?FD?Team?Star:1,067

總結:如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了,或者原生的火雞們拿去嵌套在應用中做前端開發,這個框架對 android 2.3 +、ios 4.0 + 做了兼容,或者拿來做 Web App 也是極好的選擇,劣勢的話從 UI 層面就可以看到了,誰讓它是出生在QQ會員前端的呢。

Frozen?UI

第三個是Frozen?UI,有段時間看到?QQ?瞬間高大上了,后來四處打聽,原來?QQ?客服端也用了?HTML?混合開發,其中QQ會員前端 就是用的?Frozen?UI,并且這套框架開源,欣喜若狂耐不住心里的寂寞直接上手三下五除二試了一遍就開始試用,初體驗的就是基礎樣式效果簡單色調清 爽,有個比較活躍的社區所以組件什么的也比較豐富。

Github:https://github.com/frozenui/frozenui

官網:http://frozenui.github.io/

作者:?QQVIP?FD?Team?Star:1,067

總結:如果拿?Frozen?UI?配合一些如?APICloud?用來做混合?APP?感覺就太酷了,或者原生的火雞們拿去嵌套在應用中做前端開 發,并且這個框架對?android?2.3?+、ios?4.0?+?做了兼容,或者拿來做?Web?app?也是極好的選擇,不過要是放在微信里比這 更合適的?WeUI?框架更是首選了,劣勢的話從?UI?層面就可以看到了,誰讓它是出生在QQ會員前端的呢。

WeUIi

第四個是WeUI和同?FrozenUI都屬于?差不多的?WeUi了,也是一個比較專一的框架,WeUI應該說比FrozenUI前者更專一,話 說連個官網都不搞,所有答疑都在?gitHub?Issues?解決了,這個框架極其簡單,體積當然就不用說了,模塊也就?7?個左右,不過體量雖然小做 的卻不錯,口碑看?star?就夠了,框架從?16/1/23?發版至今?github?star?超過?7K,不過也不排除用戶沒地方發泄所以都跑 到?git?上來,哈哈。

Github:https://github.com/weui/weui

DEMO:http://weui.github.io/weui/

Star:7,129

總結:看完微信設計團隊設計的這套?DEMO,二話不說如果要做微信公眾,這個二話不說必然是首選了。框架不好的地方簡而言之就是框架本身應該就沒考慮過讓用戶用到非微信的場景之下。

SUI

“SUI?是一套基于bootstrap開發的前端組件庫,同時它她也是一套設計規范。通過SUI,可以非常方便的設計和實現精美的頁面”。?果然 還是直接引用官方給的枯燥無味廣告要節省自己的腦細胞(?囧…?),當然了就像廣告說的,如果你之前用過?Bootstrap,?那么可以輕松轉 向?SUI,這可能就是淘寶給前端屌絲們的福利了。。?

Github:https://github.com/sdc-alibaba/sui

官網:http://sui.taobao.org/sui/docs/index.html

Star:120

AUI

第六個是最近剛起來的最近剛起來的?AUI,雖然作者聲稱是專為APICloud開發者設計的一套UI框架,但實際它還是解決了很多移動前端開發的 普遍問題,是它主要面向混合開發的?CSS?框架。,所以看起來作者比較猖狂,各種高級?CSS3?遍地使用,這也使得我不得不去查查這些 個?CSS3?的兼容性。不負眾望果然選的都是兼容不錯的屬性,哈哈了一頓激動從前輩手上大膽認識了幾個好東西,并且框架還提供了聊天界面、計數列表等組 件,解決了很多復雜的讓我罵娘的布局,現在可以直接拿走就用。

Github:https://github.com/liulangnan/aui

官網:http://www.auicss.com/

作者:流浪男?Star:92

總結:這個框架對我來說有個優點就是純?CSS?框架,自己以前也就用過?Pure,自己有點?js?能力,如果不是復雜的效果自己找個 純?CSS?框架自己隨便改改就能達到效果,而現在?CSS3?也已經能夠做到各種動畫,效率、質量、高效各種一頓考慮所以還是選擇了這種?CSS?框 架。而一直覺得不滿的是這框架的文檔真的好那什么,說好的高大上呢。

MUI

曾經一直使用?Android?系統的我,后來見到?IOS,果斷移情別戀了,不知道為什么蘋果每次調整系統我都特別喜歡,后來一段時間因為缺設計 我專門模仿?IOS?系統做?UI,但始終不能夠做到很好,無意間就發現了?MUI?這個框架,這個框架給我的吸引之處就是它的?UI?是以?IOS?為 主體設計的,當然它也補充了android特有UI樣式。并且MUI官方聲稱用來開發深入以后發現拿它做?APP?還能夠提高用戶使用流暢度,然后便試著 更深入的了解和使用一段時間。

官網:http://dev.dcloud.net.cn/mui/

Github:https://github.com/dcloudio/mui

Star:2,450

總結:就像之前說的這個框架是以兩大系統為參照來封裝UI組件,框架自身還有一個較為活躍的社區,不太好的地方這也是我特別關注的一點,關于開發應 用的流暢度,我當然知道這是?H5?目前的劣勢,但是看到官網給的描述,還是抱著期待的心理試試看能否提升,然而它其實還是需要是借助?Webview來 提升,而不是框架本身。

Semantic?UI

倒數第三個是 Semantic UI,接觸這個框架還是因為 Bootstrap,Semantic UI 剛上線 github 就受到大量開發者的關注,以至于很多人拿它倆對比各種挑刺各種夸,是好是壞不能單憑別人三句四句就抬起手指開始贊,用了以后感覺 UI 上跟 Bootstrap 沒太多的區別,不過代碼命名規范上卻相差甚大,本人認為 Semantic UI 是不是就想做的不一樣,它的命名全是采用復合的方式,類名特別的離散,用的時候你得很小心自己擴展或者新增的 class 命名與它的類名沖突。

官網:http://www.semantic-ui.cn/

Github:https://github.com/semantic-org/semantic-ui/

?Foundation

Foundation 算是框架界的元老啦,都說框架去的早,而這個框架一直到現在依然這么的熱門,如果你比較介意 Bootstrap 開發撞臉的尷尬事情,那么你可以考慮使用 Foundation 。即使你使用預定義的 UI 元素, 也不會與其他網站太像,就像官方說的給開發者更靈活的框架體驗。

官網:http://foundation.zurb.com/

Github:https://github.com/zurb/foundation-sites

Star:22,736

UiKit

UIkit是YOOtheme團隊開發的,在許多WordPress主題中都有應用(也就是如果你是個 WordPress 愛好者,那么這個框架應該比較適合深究),并且框架能夠通過GUI編輯器和手動編輯,所以它提供了一個靈活、強大的自定義機制。框架借助LESS、 jQuery、normalize.css及FontAwesome開源項目的獨有特點,整合成了這么一款輕量級、模塊化的前端框架。

官網:http://www.getuikit.com/
Github:https://github.com/uikit/uikit
作者:YOOtheme?Star:6,372

Pure

終于最后一個了,我和你一樣好開森 (~ ̄▽ ̄)~),這個框架是我在做管理系統時接觸的,選擇使用也是因為框架小巧,并且是純 CSS,沒有太多的牽扯,好用來與其他框架快速結合使用。

官網:http://purecss.io/

Github:https://github.com/yahoo/pure/

Star:13,592

?

轉自:http://www.cnblogs.com/huangyin1213/p/5750113.html

轉載于:https://www.cnblogs.com/songshu120/p/6905056.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/455574.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/455574.shtml
英文地址,請注明出處:http://en.pswp.cn/news/455574.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

多媒體技術復習匯總 收藏

多媒體技術復習匯總 收藏 1. 什么是媒體:媒體是信息表示和傳輸的載體。2. 媒體分類:感覺媒體,表示媒體,表現媒體,存儲媒體,傳輸媒體3. 多媒體技術的定義和特點:多媒體技…

PHP中的語法特點小結

PHP中的語法特點小結 1.PHP的變量開頭要加上$符號,見到$就知道這個是一個變量 2.PHP中的常量才是不用加$符號的 3.PHP中$可以用來嵌套使用,從而實現動態的變量名的層級調用 4.PHP程序<?php開頭,結尾可以加上?>,也可以不加 5.PHP中的常量有著魔術常量(系統自帶的) 6.PH…

滾動行為

new router({ scrollBehavior (to, from, savaPosition) { if(savePosition) { //歷史記錄的前進后退記住的之前滾動到的位置 return savePosition } else { return {x: 0, y: 0} } //history模式下 定位到某個元素失效的解決辦法 if(to.hash) { return { selector: to.h…

使用FFMPEG SDK解碼流數據獲得YUV數據及其大小

本文以H264視頻流為例&#xff0c;講解解碼流數據的步驟。 為突出重點&#xff0c;本文只專注于討論解碼視頻流數據&#xff0c;不涉及其它&#xff08;如開發環境的配置等&#xff09;。如果您需要這方面的信息&#xff0c;請和我聯系。 準備變量 定義AVCodecContext。如果您…

關于Python3.7和Python3.6中元組類型數據內存存儲問題

關于Python3.7和Python3.6中元組類型數據內存存儲問題 小編最近發現了一個瑕疵 當定義一個元組類型的變量后,若在程序后面再定義一個元組變量,這兩個元組的內容相同,那么在不同的版本中會出現不同的結果 在Python3.6版本中,解釋器將在內存中開辟兩個內存空間分別存儲兩個元組的…

shell 刪除了hdfs 文件_從零開始學大數據(三) Shell操作HDFS文件系統-中

1、格式化[rootmaster sbin]# hdfs namenode -format2、命令hdfs dfsadmin查看(hdfs dfsadmin -report)[rootmaster ~]# hdfs dfsadmin -report安全模式#獲取安全模式狀態[rootmaster ~]# hdfs dfsadmin -safemode get#進入安全狀態[rootmaster ~]# hdfs dfsadmin -safemode en…

計算機硬件

計算機硬件 一、為什么要學習計算機基礎 程序員編程的本質就是讓計算機去工作&#xff0c;而編程語言就是程序員與計算機溝通的介質。程序員要想讓計算機工作&#xff0c;就要知道計算機能干什么、是怎么樣的一個完成過程&#xff0c;這也是我們必須學習計算機基礎的原因。 …

當編程作為一種愛好

一、當編程作為一種愛好&#xff0c;時刻關心一段代碼如何實現。 二、當把工具操作得足夠熟悉&#xff0c;閉眼即能達到代碼述寫的規范。 三、程序呀&#xff0c;如果愛上你是我的錯&#xff0c;我打算一錯到底。轉載于:https://www.cnblogs.com/spiriter88/p/6913539.html

Python中的函數概述

1.python中函數概述 概念 模塊化編程的思想 有組織,可共享(重復使用,實現特定的功能的代碼塊) 提高程序的可維護性,提高開發效率,提高代碼的重用性定義一個函數 1.語法:def 函數名稱(形參列表):函數體/代碼塊return 返回值 2.定義參數介紹 def :關鍵字 用于函數的定義,函數的…

鐵路售票系統_鐵路資訊:復興號動車、智能京張高鐵…中國最高端鐵路裝備看這里...

今天上午&#xff0c;兩年一度的中國國際現代化鐵路技術裝備展在京開展&#xff0c;會期3天&#xff0c;將集中展示路網建設、客貨運輸、經營管理、工程建造、技術裝備、旅客服務等鐵路行業各領域的先進產品及技術。展會現場智能京張&#xff1a;將首次實現時速350公里自動駕駛…

H.264的NALU,RTP封包說明(轉自牛人)

H.264 RTP payload 格式 H.264 視頻 RTP 負載格式 1. 網絡抽象層單元類型 (NALU) NALU 頭由一個字節組成, 它的語法如下: --------------- |0|1|2|3|4|5|6|7| -------- |F|NRI| Type | --------------- F: 1 個比特.forbidden_zero_bit. 在 H.264 規…

CentOS下安裝MySQL報安裝文件conflicts錯誤:

2019獨角獸企業重金招聘Python工程師標準>>> 第一&#xff1a;報這個錯誤&#xff0c;說明已經安裝或相關文件已經存在&#xff0c;把已經存在的文件卸載了就可以了&#xff1a; rpm -e --nodeps mysql-libs-5.1.* 轉載于:https://my.oschina.net/u/3197158/blog/1…

inc指令是什么意思_西門子PLC一些指令

指令(英文全稱意思)∶指令含義1、LD ( Load裝載):動合觸點2、LDN (Load Not不裝載):動斷觸點3、A(And與動合):用于動合觸點串聯4、AN (And Not與動斷):用于動斷觸點串聯5、o(Or 或動合):用于動合觸點并聯6、ON(Or Not 或動斷):用于動斷觸點并聯7、(Out輸出):用于線圈輸出8、OLD…

python核心,內建函數,高階函數

晨測 global和nonlocal區別 寫一個遞歸的階乘回顧 1.global和nonlocal 關鍵字 2.函數的遞歸 1.查找規律 2.設置退出條件 3.性能 3.閉包 外函數中定義一個內函數 外函數的返回值是內函數的引用 內函數引用外函數的變量,未來外函數執行完畢,不會釋放被內函數引用變量 4.總結 1.…

對h.264壓縮視頻碼流中i幀的提取(firstime)

這個問題要說清楚還是有點復雜&#xff1a;首先判斷 NALU 類型是否是 5&#xff0c;如果是&#xff0c;那么以后連續出現的 NALU 類型為 5 的 NALU 就屬于 IDR 幀&#xff08;一種特殊的 I 幀&#xff09;&#xff1b;如果 NALU 不是 5&#xff0c;則要進一步判斷 slice_type 是…

hadoop fs 運維常用的幾個命令

FS Shell調用文件系統(FS)Shell命令應使用 bin/hadoop fs <args>的形式。 所有的的FS shell命令使用URI路徑作為參數。URI格式是scheme://authority/path。對HDFS文件系統&#xff0c;scheme是hdfs&#xff0c;對本地文件系統&#xff0c;scheme是file。其中scheme和auth…

touchesEnded不響應

為什么80%的碼農都做不了架構師&#xff1f;>>> http://blog.csdn.net/assholeu/article/details/16363241 touchesEnded不響應主要存在以下幾種情況 case 1 : userInteractionEnabled 部分控件如UIImageView&#xff0c;userInteractionEnabled默認為NO&#xff0…

python request對四類參數的處理_如何處理Djang中同一參數具有多個變量的request.GET...

在Django視圖中&#xff0c;您可以訪問request.GET[variablename]&#xff0c;因此在您的視圖中&#xff0c;您可以執行如下操作&#xff1a;myvar request.GET[myvar] 實際的request.GET[myvar]對象類型是&#xff1a; 現在&#xff0c;如果要傳遞具有相同參數名的多個變量&a…

nonlocal和global關鍵字

回顧: 1. Python的函數的概述函數定義函數調用2. Python函數中參數的類型和返回值形參和實參形參類型:普通參數: 實參的傳遞的順序和個數和形參一直關鍵字參數: 指定傳遞的實參被特定形參接收默認參數: 形參中設定當前參數的默認值可以不傳遞設定了默認參數的實參不定長參數:一…

小波在圖像視頻壓縮領域中的應用分析【轉貼】

到目前為止&#xff0c;小波的最多應用一直是數字圖像壓縮。它們是新JPEG2000數字圖像標準的核心。使用小波變換的優勢主要有如下幾個方面。 1、基于小波變換的方法能有效地保留原始圖像的細節和邊緣&#xff0c;重建圖像時不會造成“振鈴”效應。 2、基于小波變換的方法采用…