10大H5前端框架

2021-08-09 18:20:30 字數 3253 閱讀 5521

bootstrap

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

官網:github:

aui

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

github:

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

amaze ui

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

官網:github:

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

frozen ui

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

github:

官網:weuii

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

github:

demo:

sui

「sui 是一套基於bootstrap開發的前端元件庫,同時它她也是一套設計規範。通過sui,可以非常方便的設計和實現精美的頁面」。 果然還是直接引用官方給的枯燥無味廣告要節省自己的腦細胞( 囧… ),當然了就像廣告說的,如果你之前用過 bootstrap, 那麼可以輕鬆轉向 sui,這可能就是**給前端屌絲們的福利了。。 

github:

官網:mui

官網:github:

star:2,450

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

semantic ui

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

官網:github:

foundation

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

官網:github:

uikit

uikit是yootheme團隊開發的,在許多wordpress主題中都有應用(也就是如果你是個 wordpress 愛好者,那麼這個框架應該比較適合深究),並且框架能夠通過gui編輯器和手動編輯,所以它提供了乙個靈活、強大的自定義機制。框架借助less、jquery、normalize.css及fontawesome開源專案的獨有特點,整合成了這麼一款輕量級、模組化的前端框架。

官網:github:

pure

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

官網:github:

H5前端基礎 布局

浮動 使用float來設定元素浮動 可選值 none 預設值,不浮動,元素在文件流中 left 元素向左浮動 right 元素向右浮動 特點 1.元素浮動以後會完全脫離文件流 2.浮動以後元素會一直向父元素的最上方移動 3.直到遇到父元素的邊框或者其他的浮動元素,會停止移動 4.如果浮動元素的上邊是...

10大html5前端框架

10大html5前端框架 bootstrap 首先說 bootstrap,估計你也猜到會先說或者一定會有這個 呵呵了 這是說明它的強大之處,擁有框架一壁江山的勢氣。自己剛入道的時候本著 任何乙個字母都得自己敲出來擋我者廢的決心,來讓自己成長。結果受到周圍各 種 的引誘開始了 bootstrap 旅程...

10大html5前端框架

bootstrap 官網 github 總結 bootstrap 最大的優勢就是它非常流行,還有就是介面比較和諧,劣勢是 class 命名不夠語義化,並且各種縮寫。aui雖然作者聲稱是專為apicloud開發者設計的一套ui框架,但實際它還是解決了很多移動前端開發的普遍問題,是主 要面向混合開發的 ...