除了bootstrap還有什麼其他的前端框架
除bootstrap外的前端框架:1、Foundation;2、AUI;3、Frozen UI;4、WeUI;5、SUI;6、Semantic UI;7、UiKit;8、Pure。
本教學操作環境: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中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

熱門話題

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

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

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

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

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

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

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

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