15 個(gè)優(yōu)秀的響應(yīng)式 CSS 框架

作者：前端先鋒 2021-02-09 00:28:59

響應(yīng)式 Web 設(shè)計(jì)旨在為各種設(shè)備（從臺(tái)式機(jī)顯示器到手機(jī)）提供最佳的瀏覽體驗(yàn)。本文匯總了一些優(yōu)秀的響應(yīng)式 Web 設(shè)計(jì) HTML 和 CSS 框架。這些框架都是開(kāi)源的并免費(fèi)的。

[[381435]]

響應(yīng)式 Web 設(shè)計(jì)旨在為各種設(shè)備(從臺(tái)式機(jī)顯示器到手機(jī))提供最佳的瀏覽體驗(yàn)。本文匯總了一些優(yōu)秀的響應(yīng)式 Web 設(shè)計(jì) HTML 和 CSS 框架。這些框架都是開(kāi)源的并免費(fèi)的。

對(duì)響應(yīng)式 Web 框架進(jìn)行比較并不那么容易。有的框架適合設(shè)計(jì)更快、更精簡(jiǎn)網(wǎng)站的某些功能，而有些可能提供了大量功能、插件和附加組件，但是可能體積會(huì)比較龐大并且上手較難。

1. Bootstrap

[[381436]]

Bootstrap 最受歡迎

Bootstrap 是最流行的 HTML、CSS 和 JS 框架，用于在 Web 上開(kāi)發(fā)響應(yīng)式、移動(dòng)優(yōu)先項(xiàng)目。Bootstrap 使前端開(kāi)發(fā)更快、更輕松。他們提供了大量的文檔、示例和演示，可以幫你快速進(jìn)行響應(yīng)式 Web 開(kāi)發(fā)。在 Bootstrap 5 中做了一些重大更改，例如隨意使用 jQuery 并添加了 RTL 支持，再加上現(xiàn)成的組件和工具類，使 Bootstrap 成為 Web 開(kāi)發(fā)人員的最佳選擇之一。

你還可以找到許多免費(fèi)的高級(jí) bootstrap 模板和 UI 工具包，這使你的開(kāi)發(fā)過(guò)程更加輕松。

官網(wǎng)：https://getbootstrap.com/

2. Tailwind CSS

Tailwind CSS

Tailwind 提供了一種基于實(shí)用工具的現(xiàn)代方法來(lái)構(gòu)建響應(yīng)站點(diǎn)。它有大量的實(shí)用工具類，無(wú)需編寫 CSS 即可構(gòu)建現(xiàn)代網(wǎng)站。它與其它框架的不同之處在于需要通過(guò)開(kāi)發(fā)設(shè)置來(lái)縮小最終 CSS 的大小，因?yàn)槿绻褂媚J(rèn)值，最終將會(huì)得到一個(gè)很大的 CSS 文件。Tailwind 能夠快速將樣式添加到 HTML 元素中，并提供了大量的開(kāi)箱即用的設(shè)計(jì)樣式。這里有大量的 Tailwind CSS 資源 https://superdevresources.com/best-tailwind-css-resources-for-developers/。

官網(wǎng)：https://tailwindcss.com/

3. Tachyons

TACHYONS

Tachyons 也是一個(gè)基于實(shí)用工具的 CSS 庫(kù)，它提供了許多即裝即用的復(fù)雜功能，無(wú)需自己編寫大量 CSS。這樣做的好處是 Tachyons 的開(kāi)箱即用樣式很輕巧，不需要其他設(shè)置。如果需要的話，仍然可以通過(guò)一些方法來(lái)減小尺寸。如果你需要易用的實(shí)用工具庫(kù)，那么這應(yīng)該是一個(gè)不錯(cuò)的選擇。

官網(wǎng)：https://tachyons.io/

4. Foundation

The most advanced responsive

Foundation 是由產(chǎn)品設(shè)計(jì)公司 ZURB 制作的自適應(yīng)前端框架。這個(gè)框架是他們自 1998 年來(lái)構(gòu)建 Web 產(chǎn)品和服務(wù)的結(jié)果。Foundation 是最先進(jìn)的響應(yīng)式前端框架，并且提供了許多自定義功能。

官網(wǎng)：http://foundation.zurb.com/

5. Material Design for Bootstrap (MDB)

Material Design for Bootstrap

MDB 建立在 Bootstrap 之上，并提供了開(kāi)箱即用的材料設(shè)計(jì)外觀。它具有出色的 CSS 庫(kù)，并且與大多數(shù)流行的 JavaScript 框架(如 jQuery、Angular、React 和。Vue.js)兼容。其核心庫(kù)是完全免費(fèi)使用的。

官網(wǎng)：https://mdbootstrap.com/

6. UIkit

UIkit

UIkit 是一個(gè)輕量級(jí)的模塊化前端框架，用于開(kāi)發(fā)快速且強(qiáng)大的 Web 界面。UIkit 提供了 HTML、CSS 和 JS 組件的全面集合，這些組件易于使用，易于定制和擴(kuò)展。UIkit 采用移動(dòng)優(yōu)先的方法，可提供從手機(jī)、平板電腦到臺(tái)式機(jī)的一致體驗(yàn)。

官網(wǎng)：http://getuikit.com/

7. Pure CSS

Pure

Pure.css 是一組小型的響應(yīng)式 CSS 模塊，可以用在任何一個(gè) Web 項(xiàng)目中。Pure 的體積小的簡(jiǎn)直過(guò)分。比如完整的時(shí)鐘模塊最小化壓縮版本僅為 4.0 KB。Pure 基于 Normalize.css 構(gòu)建，并提供原聲 HTML 元素以及最常見(jiàn)的 UI 組件的布局和樣式。Pure 具有開(kāi)箱即用的響應(yīng)能力，所以元素在所有屏幕尺寸上都看起來(lái)不錯(cuò)。

官網(wǎng)：http://purecss.io/

8. Material Design Lite Framework (MDL)

material design light framework

Google 的 Material Design Lite 框架是最流行的 CSS 框架之一，可為你的網(wǎng)站添加 Material Design 外觀。它不依賴任何 JavaScript 框架，可以跨設(shè)備使用，并且可以針對(duì)較舊的瀏覽器進(jìn)行降級(jí)。它的構(gòu)建充分考慮了可訪問(wèn)性，并提供了豐富的文檔和入門模板。

官網(wǎng)：https://getmdl.io/

9. Materialize

materialize

Materialize 是基于 Material Design 的現(xiàn)代響應(yīng)式前端框架。Google的材料設(shè)計(jì)是一種流行的設(shè)計(jì)趨勢(shì)，涉及卡片、陰影和動(dòng)畫。

官網(wǎng)：http://materializecss.com/

10. Skeleton

Skeleton

如果你要開(kāi)發(fā)較小的項(xiàng)目，或者只是覺(jué)得自己不需要大型框架的所有實(shí)用工具，則可以試試 Skeleton。Skeleton 僅設(shè)置了少量標(biāo)準(zhǔn) HTML 元素的樣式，并包含一個(gè)網(wǎng)格。

Skeleton 中的網(wǎng)格是一個(gè) 12 列的流體網(wǎng)格，最大寬度為 960px，隨著瀏覽器或設(shè)備的縮小而縮小。可以用一行 CSS 更改最大寬度，并且所有列的大小都會(huì)相應(yīng)進(jìn)行調(diào)整。其語(yǔ)法很簡(jiǎn)單，使響應(yīng)式編碼更加容易。

官網(wǎng)：http://getskeleton.com/

11. Bulma

bulma css framework

Bulma 是基于 flexbox 的現(xiàn)代 CSS 框架。它提供了響應(yīng)式設(shè)計(jì)和移動(dòng)設(shè)備優(yōu)先的 UI 組件，并具有模塊化結(jié)構(gòu)，可讓你只導(dǎo)入要包含在 Web 設(shè)計(jì)中的內(nèi)容。Bulma 還提供了一個(gè)基于 flexbox 的現(xiàn)代網(wǎng)格系統(tǒng)。

官網(wǎng)：http://bulma.io/

12. Semantic UI

semantic ui

Semantic UI 是一個(gè)高級(jí) CSS 框架，提供了 50 多個(gè) UI 元素，300 多個(gè) CSS 變量用于自定義，并通過(guò) EM 值構(gòu)建以用于響應(yīng)式設(shè)計(jì)。它也已準(zhǔn)備好 Flexbox。

Semantic 是可用于生產(chǎn)環(huán)境的 CSS 框架，并能與 React、Angular、Meteor 和 Ember 等框架整合，你可以通過(guò)與這些框架中進(jìn)行集成將 UI 層與應(yīng)用邏輯組織在一起。

官網(wǎng)：https://semantic-ui.com/

13. Milligram

milligram css

Milligram 是一個(gè)極簡(jiǎn)的 CSS 框架，不依賴 JavaScript。它通過(guò)最少的樣式設(shè)置用來(lái)快速、干凈的創(chuàng)建響應(yīng)式網(wǎng)站。它還提供了一個(gè)基于 flexbox 的網(wǎng)格系統(tǒng)。

官網(wǎng)：https://milligram.github.io/

14. Spectre.css