HTML5(H5)常使用的十大前臺框架(一)

  • 時間:2018-07-12 22:39 作者:編程小能手 來源:編程小能手 閱讀:6167
  • 掃一掃,手機訪問
摘要:Foundation框架Foundation是一個響應式前臺框架系列,能輕松設計漂亮的響應式網站,應使用程序和電子郵件,在任何設施上看起來都很棒。Foundation是語義,可讀,靈活且完全可定制的。我們不斷增加新的資源和代碼片段,包括這些方便的HTML模板,以幫助您入門!特點:世界上最先進的響應式
HTML5(H5)常使用的十大前臺框架(一)

Foundation框架

Foundation是一個響應式前臺框架系列,能輕松設計漂亮的響應式網站,應使用程序和電子郵件,在任何設施上看起來都很棒。Foundation是語義,可讀,靈活且完全可定制的。我們不斷增加新的資源和代碼片段,包括這些方便的HTML模板,以幫助您入門!

特點:世界上最先進的響應式前臺框架。快速為適使用于任何類型設施的站點創立原型和生產代碼。

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

Bootstrap框架

Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前臺開發框架,使得 Web 開發更加快捷。 Bootstrap提供了優雅的HTML和CSS規范,它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎,一直是GitHub上的熱門開源項目,包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都用了該項目。 國內少量移動開發者較為熟習的框架,如WeX5前臺開源框架等,也是基于Bootstrap源碼進行性可以優化而來。

包含內容:

基本結構:Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。

CSS:Bootstrap 自帶以下特性:全局的 CSS設置、定義基本的 HTML 元素樣式、可擴展的 class,以及一個先進的網格系統。

組件:Bootstrap 包含了十幾個可重使用的組件,使用于創立圖像、下拉菜單、導航、警告框、彈出框等等。

JavaScript 插件:Bootstrap包含了十幾個自己設置的jQuery 插件。您能直接包含所有的插件,也能一一包含這些插件。

定制:您能定制Bootstrap的組件、LESS 變量和jQuery 插件來得到您自己的版本。

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

AUI框架

AUI為一款輕量級前臺UI框架,更偏重于CSS布局及樣式的構造,淺顯易懂的寫法及板塊式的拼裝方便使用戶自由擴展。輕小的體積、靈活的擴展性,大大提高手機端項目的體驗度和開發效率。

在目前市場上的UI框架中,大多數的框架以JS來實現過多的功可以和布局。當然并不能否定JS在一個移動前臺框架中的作使用性,既然是前臺框架側重點要更多的考慮框架本身在一個項目中的資源耗費問題及如何提高使用戶的體驗度。鑒于APICloud多窗口結構及原生板塊的拼裝,所以在手機端項目中AUI強調更多的是快速布局、靈活布局的實現,結合APICloud本身特性,提高開發效率及使用戶體驗。

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

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

Amaze UI 框架

第二個詳情的是AmazeUI,據官方說是咱們中國首個HTML5跨屏前臺框架。

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

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

Pure框架

一組小的,響應迅速的CSS板塊,您能在每個Web項目中用它們。

特點:

CSS占使用空間極小。

純凈是微不足道的。整套板塊的時鐘頻率為3.8KB *縮小和壓縮。在考慮移動設施的情況下,對我們來說保持文件大小很小很重要,并且仔細考慮了每一行CSS。假如您決定僅用這些板塊的子集,則能節省更多字節。

你的CSS基礎

Pure構建于Normalize.css之上,為原生HTML元素以及最常見的UI組件提供布局和樣式。這就是你所需要的,沒有任何瑕疵。

以移動為主題

Pure是開箱即可使用的響應,因而所有屏幕尺寸的元素都很棒。

堅持你的方式

Pure具備最小的樣式,并鼓勵您在其上編寫應使用程序樣式。它旨在讓您不受束縛,并輕松覆蓋樣式。

創立響應式布局

通過用Grids,Menus等,能輕松地為所有屏幕尺寸創立漂亮的響應式布局。我們讓您輕松上手。看看幾個不同的布局,并使用堅如磐石的基礎開始您的下一個Web項目。

這個框架是我在做管理系統時接觸的,選擇用也是由于框架小巧,并且是純 CSS,沒有太多的牽扯,好使用來與其余框架快速結合用。

HTML5(H5)常使用的十大前臺框架(一)

  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】前臺開發入門到實戰:HTML5語義化元素你真的用的正確嗎?(2019-08-22 04:16)
【系統環境|服務器應用】Vue仿微信app頁面跳轉動畫(2019-08-22 04:16)
【系統環境|服務器應用】webstorm使用快捷鍵快速修正單個文件的style(2019-08-22 04:16)
【系統環境|服務器應用】程序員從學生到阿里經歷的5次蛻變:海闊憑魚躍,天高任鳥飛(2019-08-22 04:16)
【系統環境|服務器應用】var、let、const的區別(2019-08-22 04:16)
【系統環境|服務器應用】mini-ui加載框Indicator 被遮擋問題(2019-08-22 04:15)
【系統環境|服務器應用】【對講機的那點事】玩對講機,對于對講機的亞音你理解嗎?(2019-08-22 04:15)
【系統環境|服務器應用】前臺中高級面試,內功心法(上)(2019-08-22 04:15)
【系統環境|服務器應用】17、改進輪播圖之功能封裝(2019-08-22 04:15)
【系統環境|服務器應用】第10題- 你不知道的delete操作符(2019-08-22 04:15)
手機二維碼手機訪問領取大禮包
返回頂部
双色球号码300期遗传走势图