在幾年前，并沒有真正意義上的前端開發。隨著網絡技術的發展，網站和 Web 應用程序變得越來越復雜，前端部分的工作獨立出來逐漸成為現在的前端開發。如今，我們可以看到越來越多的公司在招聘前端開發崗位。

　　前端開發并不容易，除了掌握基本的 HTML、CSS 和 Javascript 之外，因為不同版本的瀏覽器和平臺，你需要知道如何做一個跨瀏覽器的網站。而最新的發展趨勢——響應式設計，它不僅使 Web 項目開發更難，也需要花費更多的開發時間。

　　不過，有很多優秀的框架可以幫助到你，這篇文章挑選了14個響應式的前端框架，列出了每個框架的 UI 組件和 Javascript 插件，幾乎所有的都使用了響應式網格系統。就個人而言，我比較喜歡 Twitter Boostrap，你最喜歡這里面的哪個呢？

　這些前端框架能為您提供以下好處：

• 跨瀏覽器：前端框架都在不同的瀏覽器測試通過。
• 一致性：?UI 組件，如導航，按鈕，標簽，表單，下拉菜單，表格...?他們的風格都相互統一。
• 快速開發：您可以輕松，快速的構建一個布局。他們通常有代碼片段和優秀的文檔。
• 響應式：所有 CSS 組件和 Javascript 插件能夠從桌面擴展到移動端。

　InK

　　Ink 是一個用于快速開發 Web 界面的 UI?套件，簡單易用和。它通過整合 HTML，CSS 和 JavaScript 來提供現代化的解決方案，構建布局，顯示通用的界面元素，為你的用戶實現內容為中心的和用戶友好的互動功能。

• HTML & CSS 組件：布局，導航，排版，圖標，表格，提醒，表單。
• JavaScript 組件：畫廊，模態窗口，表格，可排序的日期選擇器，選項卡，表單驗證，行為（停靠，折疊，關閉）。
• 其它特性：支持Sass 混入。

　GroundworkCSS

　　GroundworkCSS 靈活的網格系統使你能夠快速開發，并能夠適應任何屏幕尺寸，從手持設備到大尺寸的顯示屏。GroundworkCSS 構建在強大的 CSS 預處理器 Sass 的基礎上。Sass是對 CSS3 的擴展，并添加了嵌套規則，變量，混入，選擇器繼承等等眾多特性。使用命令行工具或 Web 框架插件可以轉換為標準的 CSS 代碼。

• HTML & CSS 組件：網格，布局，排版，按鈕，瓷磚，表格，表格，圖示，社會的圖標，響應文本，消息，警報。
• JavaScript組件：導航，標簽，工具提示。
• 其它特性：支持 Sass 混入。

　Ivory

　　靈活，強大的響應式 Web 框架，使 Web 開發更快，更容易。支持 1200 像素到 320px 區間的響應式布局。

• HTML & CSS 組件：網格，排版，表單，按鈕，提醒，分頁，面包屑，列表，表格。
• JavaScript組件：工具提示，選項卡，切換開關，手風琴。

　Foundation

　　Foundation 是由加利福尼亞州的產品設計公司 Zurb 推出的。這是目前最先進的響應式前端框架，它有很多的模板布局，UI 組件的 CSS 樣式，也收錄了很多他們自己的 JavaScript 插件。

• HTML & CSS 組件：網格布局模板，圖標，字體，響應式表格，SVG 社交圖標，分頁，面包屑，邊欄導航，按鈕，字體，標簽，提醒，面板，價格表，進度條，表格，縮略圖。
• JavaScript 組件：下拉按鈕，分割按鈕，開關，自適應視頻，燈箱，下拉列表，導航，顯示模態窗口，選項卡，工具提示。
• 其他特性：自定義皮膚的表單，SCSS 混入。

　Grumby

　　Gumby 2 基于強大的 Sass 構建，Sass是一個功能強大的 CSS 預處理器，這使我們能夠快速的開發自己的 Gumby，并為您提供新的工具，讓你能夠在 Gumby 的框架基礎上快速定制。

• HTML & CSS 組件：網格，表單，按鈕，導航，標簽，Entypo 圖標。
• JavaScript 組件：切換開關，下拉框，選項卡，模態窗口。
• 其他特性：自定義皮膚的表單，SASS & Compass。

　HTML KickStart

　　超精益的 HTML5，CSS & JS 模塊，用于快速網站制作。它有一個全面的 UI 組件，也有一些有用的 JavaScript 插件，它的目標是成為設計師的朋友。

• HTML & CSS 組件：網格，排版，按鈕，按鈕條，列表，表格，圖標，面包屑，圖像，表格。
• JavaScript：菜單，工具提示，語法高亮，選項卡，幻燈片，表單驗證。
• 其他特性：額外的 CSS 工具。

　Maxmertkit

　　這個框架是由 Vetrenko Maxim Sergeevich 創建的，使程序員的生活更輕松。Maxmerkit 是基于部件修改器編碼風格的一個 CSS 框架。

• HTML & CSS 組件：網格布局，typograpghy，徽章，按鈕，插入符，表格，圖標，標簽，菜單，進度表，下拉菜單，工具提示。
• JavaScript 組件：按鈕，轉盤，模態窗口，通知，彈出層，選項卡，滾動偵測。
• 其他特性：支持?Sass, Coffee Script。

　Twitter Bootstrap

　　Bootstrap?是基于 HTML，CSS 和 JavaScript 的簡潔靈活的流行前端框架及交互組件集，由微博的先驅 Twitter 在2011年8月開源的整套前端解決解決方案。Bootstrap有非常完備和詳盡的開發文檔，Web?開發人員能夠輕松搭建出清爽風格的界面以及實現良好的交互效果。

• HTML & CSS 組件：?網格，布局，排版，代碼，表格，表單，按鈕，圖像，圖標，按鈕組，導航，面包屑，分頁，選項卡，徽章，縮略圖，提醒，進度條。
• JavaScript 組件：?過渡，模態窗口，下拉框，滾動檢測，標簽，工具提示，彈出層，警報，按鈕，手風琴，旋轉木馬，自動補齊。
• 其它特性： 支持定制， LESS CSS。

　Skeleton

　　Skeleton?是一個小集合的 CSS 文件，可以幫助你迅速開發任何尺寸，外觀漂亮的網站，例如用于 17 寸筆記本電腦屏幕或 iPhone 屏幕的。Skeleton 建立在三個核心原則之上：兼容移動端的響應式網格，快速入門，風格無關。Skeleton 對于大多數開發者是一個相當不錯的選擇，因為它是輕量級的且易于使用。

• HTML & CSS 組件：?網格，排版，按鈕，表單，媒體查詢。

　Kube

　　Kube 是由 imperavi （他也是著名的 Redactor 編輯器的作者）發布的前端框架，以使設計者/開發者的生活更輕松。簡約而不簡單，適應性和響應式能夠使用各種需求。革命性的靈活網格和漂亮的印刷字體，沒有任何強加的樣式。

• HTML & CSS 組件：排版，表單，網格，表格，按鈕，導航，圖標。
• JavaScript 組件：?按鈕，標簽。
• 其它特性：支持 LESS CSS。

　Helium

　　Helium?是一種前端響應式 Web 開發框架，用于 HTML5 和 CSS3 項目的快速原型設計和實際開發。它在許多方面與?Twitter Bootstrap 和 ZURB Foundation 相似。然而，不同于這兩個框架的是，Helium 的目的是要更輕量，更容易更改。把它看成是一個典型的汽車，在那里你可以打開引擎蓋，容易對發動機進行改裝。

• HTML & CSS 組件：?網格，按鈕，排版，表格。
• JavaScript 組件：?下拉框，表單驗證，模態窗口。
• 其它特性： 支持SASS & Compass。

　Markup

　　Markup?框架是一個布局，窗口小部件，排版樣式和其他的 UI 組件的集合，可以根據自己的需要進行整合。

• HTML & CSS 組件：布局，網格，排版，表格，按鈕，標題，面包屑，消息，導航列表，導航菜單。
• JavaScript 組件：?無 Javascript，純 CSS。

　Topcoat

　　Topcoat?是一個 CSS 集合，用于簡潔和快速的 Web 應用程序開發。它是一個開源庫，不需要任何 JavaScript 內置的用戶界面元素。

• HTML & CSS 組件：?圖標，字體，按鈕，面包屑，按鈕欄，表格，下拉列表，滑動開關，標簽，切換按鈕，選擇，滑塊
• JavaScript 組件：?無 Javascript ，純 CSS

　PureCSS

　　Pure?是一組輕量的，響應式的?CSS 模塊，您可以使用在任何的?Web?項目中。充分考慮了移動設備中的使用，保持文件體積盡量小，每行?CSS?都進行了仔細的考慮。Pure 基于 Normalize.css 構建，并提供布局以及 原生 HTML 元素的風格，加上最常見的 UI 組件。相信這些都是你需要的。

• HTML & CSS 組件：?網格，排版，表格，按鈕，表格，菜單。
• JavaScript 組件：?無 Javascript ，純 CSS。
• 其它特性： 皮膚制作器，YU 庫。

　總結

　　我必須要說的是，根據項目的不同要求，大部分的時間你都需要對使用的框架進行調整以符合您的設計。我們不應該完全使用框架來建立一個網站，因為這將極大地限制設計師的潛力。

　　如果前端的設計或布局并不重要，我們可以使用該框架。例如在網站后臺管理系統的使用?Twitter Bootstrap，它可以幫助你節省60%的開發時間。

　　有時候，你可能只需要使用框架中的一部分，例如網格系統，那么別的不需要的就可以刪除。總而言之，沒有完美的前端框架，要根據項目的需求和實際使用場景靈活變通，讓框架成為你的助手而不是障礙。

轉載于:https://www.cnblogs.com/Blog-Yang/p/3245439.html

總結

以上是生活随笔為你收集整理的14个支持响应式设计的流行前端开发框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。