響應式前端框架有哪些？

作者：由匿名使用者發表于繪畫時間：2017-04-28

知乎使用者2017-04-29 23:39:10

Front-end CSS Frameworks

拿去玩

知乎使用者2017-04-30 17:46:22

foundation好像不錯

城南酒肆2017-06-02 16:06:45

目前在網際網路公司前端主要用的框架為：BootStrap，AmazeUI，其它的框架貌似很少。

黑馬程式設計師前端2022-02-11 11:40:21

本文收集了14個響應式前端開發框架，可以幫助前端開發人員大大簡化開發過程。針對每個框架，文中均指出了它所包含的UI元件及JavaScript外掛。幾乎所有的框架都採用了響應式網格系統。

使用這些前端框架，有如下好處：

跨瀏覽器。

這一點已被證實。

一致性。

UI元件，如導航、按鈕、標籤、表單、下拉框、表格……，在設計上保持風格一致。

快速開發。

你可以快速、容易地構建佈局。這些框架都配有詳細的說明文件。

響應式。

所有CSS元件及JavaScript外掛可以很好地從桌面過渡到移動裝置上。

InK

Ink為一個介面工具包，用於快速開發Web介面，具有易於使用、易於擴充套件特點。它可以為構建佈局提供解決方案，可以展示普通的介面元素，可以實現以內容為中心、對使用者友好的互動方式。

HTML&CSS：佈局、導航、排版、圖示、表單、提示框、表格

JS：Gallery、表格、樹檢視、排序列表、日期選擇外掛、製表符、表單驗證及一些行為（停靠、摺疊、關閉）

其他：Sass Mixins

GroundworkCSS Beta

GroundworkCSS是一個基於Sass預處理器的開源專案，主要用於快速構建響應式Web應用程式。擁有一個靈活的、可巢狀的網格系統，可以建立適應多種瀏覽裝置的佈局。GroundworkCSS還提供多種UI 元件，如導航、按鈕、圖示、表單、Tabs、對話方塊、工具提示等等。

HTML&CSS：網格、佈局、排版、按鍵、標題、表單、圖示、社交圖示、響應式文字、對話方塊、工具提示

JS：導航、製表符（Tab）、提示框、Cycle2

其他：Sass Mixins

Ivory

這是一個靈活、強大的響應式Web框架，使Web開發更快速、更簡單。

HTML&CSS：網格、排版、表單、按鈕、提示框、頁碼、麵包屑導航（breadcrumb）、列表、表格

JS：提示框、製表符（Tab）、切換開關（Toggle switch）、摺疊

ZURB

Foundation由ZURB公司設計，ZURB是一家產品設計公司，位於加州坎貝爾。Foundation為最先進的響應式前端開發框架，它擁有很多佈局模板、CSS樣式表及自己開發的優秀JavaScript外掛。

HTML&CSS：網格、佈局模板、圖示字型、響應式表格、SVG格式的社交圖示、頁碼、麵包屑導航（breadcrumbs）、側導航、按鍵、排版、標籤、提示框、面板、價格表、進度欄、表格、縮圖

JS：下拉按鈕、拆分按鈕、轉換開關、Flex影片、燈箱、下拉、響應式佈局（透過轉換圖片大小來實現）、旅遊導航、麥哲倫全域性導航（Magellan Sticky Nav）、Orbit圖片滑動幻燈片外掛等

其他：可定製面板表單（Custom Skinned Forms）、SCSS Mixin

Grumby

Gumby 2基於Sass開發。Sass為功能強大的CSS預處理器，利用它可以快速開發Gumby。

HTML&CSS：網格、表單、按鈕、導航、標籤、Entypo圖示

JS：下拉、浮窗、製表符（Tab）、開關與轉換（Toggles & Switches）

其他：可定製面板表單（Custom Skinned Forms）、SASS和Compass

HTML KickStart

該框架集合了HTML5、CSS和JavaScript，幫助開發人員快速開發Web產品。它覆蓋了所有UI元件，同時也包含一些有用的JavaScript外掛。

HTML&CSS：網格、排版按鈕、列表、表格、圖示、麵包屑導航、圖片、表單

JS：選單、程式碼高亮外掛、製表符（Tab）、幻燈片播放、表單驗證

其他：CSS幫助文件

Maxmertkit

Maxmertkit擁有完整的文件，包含大量例項，並且提供了拖拽生成程式碼的功能。

HTML&CSS：網格、佈局、徽章、按鈕、表單、圖示、標籤、選單、進度欄、表格、下拉、工具提示

JS：按鈕、旋轉木馬、通知、彈出框、捲軸、製表符（Tab）

其他： Sass、Coffee指令碼語言

Twitter Bootstrap

大家對Twitter Bootstrap已十分熟悉了。憑藉全面的UI元件、易用的網格和元件，Bootstrap已成為眾多設計者和開發者最喜歡的快速開發工具。現在已經有很多第三方Bootstrap程式和JavaScript外掛可供使用。

HTML&CSS：網格、佈局、排版、編碼、表格、表單、按鍵、圖片、圖示、按鈕組、導航、麵包屑導航、頁碼、標籤、徽章、縮圖、提示框、進度欄

JS：模態視窗（Modals）、提示效果（Tool Tips）、“泡芙”效果（Popovers）、滾動監控（Scrollspy）、旋轉木馬（Carousel）、輸入提示（Typeahead）等等。

其他：定製器（Customizer）、 LESS CSS

Skeleton

Skeleton 是一個小的JS和CSS檔案集合，可幫你快速開發漂亮的網站，適合各種螢幕裝置，包括手機。Skeleton基於960 Grid開發，是一個UI框架。

HTML&CSS：GRid、排版、按鈕、表單、媒體查詢（Media Queries）

Kube

Kube是一款最小化的，支援響應式的前端框架，包括一個簡潔的CSS檔案，用於方便地建立響應式佈局，包括了兩個JS檔案來完成Tab以及頁面的按鈕操作。

HTML&CSS：排版、網格、表單、表格、按鈕、導航、圖示

JS：按鈕、製表符（Tab）

其他： LESS CSS

Helium

Helium是一個前端響應式Web框架，使用HTML5、CSS3快速製作原型以及開發產品。Helium很像Twitter Bootstrap和ZURB Foundation，事實上，Helium使用了兩者不少的程式碼。但與這兩個框架不同的是，Helium設計更加輕量級，而且更容易修改。Helium只有30KB左右，而Bootstrap有100KB，ZURB有200多KB。

HTML&CSS：網格、按鈕、排版、表單

JS：下拉、表單驗證

其他：Sass、Compass

The Markup Framework

Markup是一套集佈局、小元件、UI元件和字型排版樣式為一體的框架。它可以作為你設計自己網站的起點。

HTML&CSS：佈局、網格、排版、表單、按鈕、麵包屑導航、導航列表、導航選單

JS：沒有JavaScripts，只有單純的CSS

Topcoat

TopCoat是一套免費的開源UI元素類庫，整套類庫不使用任何JavaScript，而是使用CSS和HTML來生成。

HTML&CSS：圖示、字型、按鍵、麵包屑導航、表單、下拉、滑動開關、選擇、捲軸、切換按鈕

JS：沒有JavaScripts，只有單純的CSS

PureCSS