首頁 web前端 css教學 最受歡迎的10大CSS框架

最受歡迎的10大CSS框架

May 05, 2020 am 09:31 AM
css 框架

Web 開發工程師在開發頁面樣式的時候需要花費大量的時間開發,其中最頭疼的還是瀏覽器的兼容性問題,最省事的是使用CSS 框架,幸運的是一些大神編寫了一套精美的CSS 框架並開源出來,那麼有哪些不錯的CSS 框架呢?

我收集了一些資料和資料來和大家討論,下面我就說說 Github 上 star 最多的 10 大 CSS框架。

Bootstrap

Github star 數量 140K。

GitHub 網址:https://github.com/twbs/bootstrap

Bootstrap 是最受歡迎的 CSS 框架,被認為是擁有最好的響應性的CSS框架。專為前端開發而設計,有助於建立web設計理念、行動優先項目、網格系統、排版和按鈕等。

Semantic-UI

Github star 數量 47.8K。

GitHub 網址:https://github.com/Semantic-Org/Semantic-UI

Semantic 是一個開發框架,可以使用人性化的 HTML 來幫助創建漂亮的響應式佈局。 Semantic UI 旨在使網站建立過程更加語義化。核心特徵是利用自然語言原理使程式碼更易於閱讀,更容易理解。

Materialize

Github star 數量 37.5K。

GitHub 地址:https://github.com/Dogfalo/materialize

Materialize是基於Material Design設計的前端框架,支援自適應,現代感十足。

Bulma

Github star 數量 39.6K。

GitHub 位址:https://github.com/jgthms/bulma

Bulma 是一個基於Flexbox 的現代化的CSS 框架,其響應式、模組化、開源免費,可以輕鬆用來實現各種簡單或複雜的內容佈局,Bulma 最大的特點是輕量、無依賴、簡單、易用,所有樣式都基於class,即使不懂CSS 也可以輕而易舉的做出美觀的網頁。

更多詳細介紹:http://www.sevdot.com/articles/7

#Foundation

Github star 數量 28.6K。

GitHub 網址:https://github.com/zurb/foundation-sites

Foundation 用於開發響應式的 HTML, CSS and JavaScript 框架。

Foundation 是一個易於使用、強大且靈活的框架,用於建立基於任何裝置上的 Web 應用。

Foundation 是一個以行動優先的流行框架。

Pure

Github star 數量 20.8K。

GitHub 網址:https://github.com/pure-css/pure

Yahoo公司出品的一組輕量、響應式純css模組,適用於任何Web專案。

Pure 小到不要不要的,壓縮成gzip檔僅為3.7KB*。我們力求每一行程式碼都精簡到極致,以便最大程度壓縮CSS大小,更利於行動Web製作。如果您只使用其中的一部分模組,那麼CSS真是小到沒有朋友了!

Layui

Github star 數量 21.5K。

GitHub 位址:https://github.com/sentsin/layui

Layui 是一款採用自身模組規範編寫的情懷型前端UI框架,遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到API的每一處細節都經過精心雕琢,非常適合界面的快速開發。

Uikit

Github star 數量 13.5K。

UIkit 是 YOOtheme 團隊開發的一款輕量級、模組化的前端框架,可快速建立強大的web前端介面。 UIKit 提供了全面的 HTML、CSS 及 JS 元件,它們使用簡單,容易自訂和擴充。

它是基於LESS 開發,程式碼結構清晰簡單,易於擴展和維護,並且具有體積小、反應靈敏的響應式元件,你可以根據UIKit 基本的風格樣式,輕鬆地自訂創建出自己喜歡的主題樣式。

Amaze UI

Github star 數量 13.4K。

GitHub 地址:https://github.com/amazeui/amazeui

Amaze UI 以移動優先(Mobile first)為理念,從小屏逐步擴展到大屏,最終實現所有屏幕適配,適應行動互聯潮流。

Amaze UI 包含近 20 個 CSS 元件、20 餘 JS 元件,更有多個包含不同主題的 Web 元件,可快速建立介面出色、體驗優秀的跨螢幕頁面,大幅提升開發效率。

比較國外框架,Amaze UI 專注於中文排版,依照使用者代理調整字體,實現更好的中文排版效果;兼顧國內主流瀏覽器及 App 內建瀏覽器相容支援。

Amaze UI 面向 HTML5 開發,使用 CSS3 來做動畫交互,平滑、高效,更適合行動設備,讓 Web 應用程式更快速載入。

jQuery UI

Github star 數量 10.8K。

GitHub 網址:https://github.com/jquery/jquery-ui

jQuery UI 是一組建立在jQuery JavaScript 函式庫上的使用者介面互動、特效、小工具及主題。無論您是建立高度互動的 Web 應用程式還是僅向窗體控制項新增一個日期選擇器,jQuery UI 都是一個完美的選擇。

jQuery UI 包含了許多維持狀態的小部件(Widget),因此,它與典型的 jQuery 外掛程式使用模式略有不同。所有的 jQueryUI 小工具(Widget)都使用相同的模式,所以,只要您學會使用其中一個,您就知道如何使用其他的小工具(Widget)。

以上是最受歡迎的10大CSS框架的詳細內容。更多資訊請關注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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

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

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

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

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:12 PM

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

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:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

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

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

See all articles