目錄
除了bootstrap還有什麼其他的前端框架
首頁 web前端 Bootstrap教程 除了bootstrap還有什麼其他的前端框架

除了bootstrap還有什麼其他的前端框架

Feb 17, 2022 pm 02:58 PM
bootstrap

除bootstrap外的前端框架:1、Foundation;2、AUI;3、Frozen UI;4、WeUI;5、SUI;6、Semantic UI;7、UiKit;8、Pure。

除了bootstrap還有什麼其他的前端框架

本教學操作環境:Windows10系統、bootstrap3.3.7版、DELL G3電腦

除了bootstrap還有什麼其他的前端框架

AUI

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

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

Frozen UI

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

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

WeUI

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

SUI

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

Semantic UI

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

Foundation

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

UiKit

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

Pure

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

相關推薦:bootstrap教學

#

以上是除了bootstrap還有什麼其他的前端框架的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

bootstrap搜索欄怎麼獲取 bootstrap搜索欄怎麼獲取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值:確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

bootstrap垂直居中怎麼弄 bootstrap垂直居中怎麼弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 實現垂直居中:flexbox 法:使用 d-flex、justify-content-center 和 align-items-center 類,將元素置於 flexbox 容器內。 align-items-center 類法:對於不支持 flexbox 的瀏覽器,使用 align-items-center 類,前提是父元素具有已定義的高度。

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼看日期 bootstrap怎麼看日期 Apr 07, 2025 pm 03:03 PM

答案:可以使用 Bootstrap 的日期選擇器組件在頁面中查看日期。步驟:引入 Bootstrap 框架。在 HTML 中創建日期選擇器輸入框。 Bootstrap 將自動為選擇器添加樣式。使用 JavaScript 獲取選定的日期。

See all articles