2016-08-22 分類: 手機(jī)網(wǎng)站建設(shè)
Bootstrap
首先說 Bootstrap,估計(jì)你也猜到會先說或者一定會有這個 (呵呵了),這是說明它的強(qiáng)大之處,擁有框架一壁江山的勢氣。自己剛?cè)氲赖臅r候本著代碼任何一個字母都得自己敲出來擋我者廢的決心,來讓自己成長。結(jié)果受到周圍各種基友的引誘開始了 Bootstrap 旅程。本人雖然是個設(shè)計(jì) + 前端的萬里有一的人才,但是老天只讓我會用 PS 和各種設(shè)計(jì)工具卻不給我跟設(shè)計(jì)妹子一樣的審美,所以這也是我最初選擇 Bootstrap 的原因之一,它讓我做出來的東西好歹能在妹子面前裝個逼,不過時間長了難免覺得 Bootstrap 美的讓人煩躁,但好在它的每個版本都會有很大的改變,不會讓人覺得自己做的網(wǎng)站會跟很多網(wǎng)站撞臉。Bootstrap 的用法及其簡單 (這也可能就是 Bootstrap 作者閱攻城士無數(shù),了解他們痛的結(jié)果),以至于是個小前端都可以快速上手,幾乎沒什么學(xué)習(xí)成本。
總結(jié):Bootstrap 大的優(yōu)勢就是它非常流行,流行就代表你有問題就有很多人幫你解決問題,就代表裝逼它就是利器,還有就是界面比較和諧,容易上手,關(guān)注它的童鞋應(yīng)該發(fā)現(xiàn)最新 V4 版也開始支持 FlexBox 布局,這是非常好的升級體驗(yàn)。劣勢是 class 命名不夠語義化,并且各種縮寫,以至于我離了文檔就是個菜,最近開始整混合 APP,選框架的時候選就是它,但之前搞 PC 一直沒注意,后來搞混合右鍵屬性看它的時候,瞬間一陣涼風(fēng)襲來,Bootstrap 好小,小到我只好選擇別的框架。
AUI
第二個是最近剛起來的 AUI,雖然作者聲稱是專為 APICloud 開發(fā)者設(shè)計(jì)的一套 UI 框架,但實(shí)際它還是解決了很多移動前端開發(fā)的普遍問題,是主要面向混合開發(fā)的 CSS 框架??雌饋碜髡弑容^猖狂,各種高級 CSS3 遍地使用,這讓我也不得不去查查這些個 CSS3 的兼容性。不負(fù)眾望果然選的都是兼容不錯的屬性,哈哈了一頓激動從前輩手上大膽認(rèn)識了幾個好東西,并且框架還提供了聊天界面、計(jì)數(shù)列表等組件,解決了很多復(fù)雜的讓我罵娘的布局,現(xiàn)在可以直接拿走就用。
總結(jié): 這個框架對我來說有個優(yōu)點(diǎn)就是純 CSS 框架,自己以前也就用過 Pure,自己有點(diǎn) JS 能力,如果不是復(fù)雜的效果,找個純 CSS 框架自己隨便改改就可以,而現(xiàn)在 CSS3 也已經(jīng)能夠做到動畫,效率、質(zhì)量、高效全兼顧,所以還是選擇了這種 CSS 框架。有一點(diǎn)覺得不滿的是這框架的文檔真的好那什么,說好的高大上呢。
Amaze UI
第三個介紹的是「鵝妹子 UI」,最初使用它是因?yàn)楸咀鹩龅搅艘粋€愛糾結(jié)細(xì)節(jié)設(shè)計(jì)師。有一次她跟我的字體較上真了,結(jié)果一句頂萬句的 BOOS 夸了她,我只好根據(jù)她的想法去解決,結(jié)果最后找到了 Amaze UI 框架 (我不介意你叫我懶淫),按照官方的話說就是「基于社區(qū)開源項(xiàng)目構(gòu)建的一個跨屏前端框架,以移動優(yōu)先,從小屏到大屏,最終實(shí)現(xiàn)所有屏幕適配,適應(yīng)移動互聯(lián)潮流」。但其實(shí)我就是看中它能解決國內(nèi)瀏覽器存在的跨屏適配和兼容性問題。
總結(jié):Amaze UI 總的來說加入更多符合中國市場特性的元素,框架對跨屏、適配都做了比較好的處理并且準(zhǔn)備了一系列的常用網(wǎng)頁組件,為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻(xiàn)??蚣苓€對中文排版優(yōu)化,兼容中國本土主流瀏覽器、輕量化,不僅適用于桌面端,更適合移動端。
Frozen UI
有段時間看到 QQ 瞬間高大上了,后來四處打聽,原來 QQ 客服端也用了 混合開發(fā),其中 QQ 會員前端用的是 Frozen UI,并且這套框架開源,欣喜若狂耐不住心里的寂寞直接上手試了一遍,初體驗(yàn)感覺基礎(chǔ)樣式效果簡單色調(diào)清爽,有個比較活躍的社區(qū)所以組件什么的也比較豐富。
總結(jié): 如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了,或者原生的火雞們拿去嵌套在應(yīng)用中做前端開發(fā),這個框架對 Android 2.3 +、iOS 4.0 + 做了兼容,或者拿來做 Web App 也是極好的選擇,劣勢的話從 UI 層面就可以看到了,誰讓它是出生在 QQ 會員前端的呢。
WeUI
WeUI 和 FrozenUI 都屬于比較專一的框架,WeUI 比 FrozenUI 更專一,話說連個官網(wǎng)都不搞,所有答疑都在 gitHub Issues 解決了,這個框架極其簡單,體積當(dāng)然就不用說了,模塊也就 7 個左右,不過體量小做的卻不錯,口碑看 star 就夠了,框架從 16/1/23 發(fā)版至今 Github Star 超過 7K, 不過也不排除用戶沒地方發(fā)泄所以都跑到 git 上來,哈哈。
總結(jié): 看完微信設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)的這套 DEMO,如果要做微信公眾,這個二話不說必然是選了??蚣懿缓玫牡胤胶喍灾褪强蚣鼙旧響?yīng)該就沒考慮過讓用戶用到非微信的場景之下。
SUI
「SUI 是一套基于 bootstrap 開發(fā)的前端組件庫,同時它也是一套設(shè)計(jì)規(guī)范。通過 SUI,可以非常方便的設(shè)計(jì)和實(shí)現(xiàn)精美的頁面」。果然還是直接引用官方給的枯燥無味廣告要節(jié)省自己的腦細(xì)胞 (囧…),當(dāng)然了就像廣告說的,如果你之前用過 Bootstrap,那么可以輕松轉(zhuǎn)向 SUI,這可能就是淘寶給前端屌絲們的福利了。
Semantic UI
倒數(shù)第三個是 Semantic UI,接觸這個框架還是因?yàn)?Bootstrap,Semantic UI 剛上線 github 就受到大量開發(fā)者的關(guān)注,以至于很多人拿它倆對比各種挑刺各種夸,是好是壞不能單憑別人三句四句就抬起手指開始贊,用了以后感覺 UI 上跟 Bootstrap 沒太多的區(qū)別,不過代碼命名規(guī)范上卻相差甚大,本人認(rèn)為 Semantic UI 是不是就想做的不一樣,它的命名全是采用復(fù)合的方式,類名特別的離散,用的時候你得很小心自己擴(kuò)展或者新增的 class 命名與它的類名沖突。
Foundation
Foundation 算是框架界的元老啦,都說框架去的早,而這個框架一直到現(xiàn)在依然這么的熱門,如果你比較介意 Bootstrap 開發(fā)撞臉的尷尬事情,那么你可以考慮使用 Foundation。即使你使用預(yù)定義的 UI 元素, 也不會與其他網(wǎng)站太像,就像官方說的給開發(fā)者更靈活的框架體驗(yàn)。
UiKit
UIkit 是 YOOtheme 團(tuán)隊(duì)開發(fā)的,在許多 WordPress 主題中都有應(yīng)用 (也就是如果你是個 & nbsp;WordPress 愛好者,那么這個框架應(yīng)該比較適合深究),并且框架能夠通過 GUI 編輯器和手動編輯,所以它提供了一個靈活、強(qiáng)大的自定義機(jī)制。框架借助 LESS、jQuery、normalize.css 及 FontAwesome 開源項(xiàng)目的獨(dú)有特點(diǎn),整合成了這么一款輕量級、模塊化的前端框架。
Pure
終于最后一個了,我和你一樣好開森 (~ ̄▽ ̄)~),這個框架是我在做管理系統(tǒng)時接觸的,選擇使用也是因?yàn)榭蚣苄∏?,并且是?CSS,沒有太多的牽扯,好用來與其他框架快速結(jié)合使用。
介紹完畢,估計(jì)你應(yīng)該看出來了,我使用框架真的也就是遇到了需求,才選擇了某個框架,所以框架之間并沒有什么好與特好之分,只能說你的需求是什么,這個框架合適不合適你去用,各種框架用起來也都大致差不多,會用一個其他的上手也就都變得簡單容易上手,我覺得能寫框架的人都是世外高人。
網(wǎng)站名稱:幾款手機(jī)網(wǎng)站前端框架
分享鏈接:http://m.rwnh.cn/news20/45820.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容