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

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

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

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

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

　InK

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

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

　GroundworkCSS

　　GroundworkCSS 靈活的網(wǎng)格系統(tǒng)使你能夠快速開發(fā)，并能夠適應(yīng)任何屏幕尺寸，從手持設(shè)備到大尺寸的顯示屏。GroundworkCSS 構(gòu)建在強大的 CSS 預(yù)處理器 Sass 的基礎(chǔ)上。Sass是對 CSS3 的擴(kuò)展，并添加了嵌套規(guī)則，變量，混入，選擇器繼承等等眾多特性。使用命令行工具或 Web 框架插件可以轉(zhuǎn)換為標(biāo)準(zhǔn)的 CSS 代碼。

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

　Ivory

　　靈活，強大的響應(yīng)式 Web 框架，使 Web 開發(fā)更快，更容易。支持 1200 像素到 320px 區(qū)間的響應(yīng)式布局。

• HTML & CSS 組件：網(wǎng)格，排版，表單，按鈕，提醒，分頁，面包屑，列表，表格。
• JavaScript組件：工具提示，選項卡，切換開關(guān)，手風(fēng)琴。

　Foundation

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

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

　Grumby

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

• HTML & CSS 組件：網(wǎng)格，表單，按鈕，導(dǎo)航，標(biāo)簽，Entypo 圖標(biāo)。
• JavaScript 組件：切換開關(guān)，下拉框，選項卡，模態(tài)窗口。
• 其他特性：自定義皮膚的表單，SASS & Compass。

　HTML KickStart

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

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

　Maxmertkit

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

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

　Twitter Bootstrap

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

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

　Skeleton

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

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

　Kube

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

• HTML & CSS 組件：排版，表單，網(wǎng)格，表格，按鈕，導(dǎo)航，圖標(biāo)。
• JavaScript 組件：?按鈕，標(biāo)簽。
• 其它特性：支持 LESS CSS。

　Helium

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

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

　Markup

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

• HTML & CSS 組件：布局，網(wǎng)格，排版，表格，按鈕，標(biāo)題，面包屑，消息，導(dǎo)航列表，導(dǎo)航菜單。
• JavaScript 組件：?無 Javascript，純 CSS。

　Topcoat

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

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

　PureCSS

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

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

　總結(jié)

　　我必須要說的是，根據(jù)項目的不同要求，大部分的時間你都需要對使用的框架進(jìn)行調(diào)整以符合您的設(shè)計。我們不應(yīng)該完全使用框架來建立一個網(wǎng)站，因為這將極大地限制設(shè)計師的潛力。

　　如果前端的設(shè)計或布局并不重要，我們可以使用該框架。例如在網(wǎng)站后臺管理系統(tǒng)的使用?Twitter Bootstrap，它可以幫助你節(jié)省60%的開發(fā)時間。

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

轉(zhuǎn)載于:https://www.cnblogs.com/Blog-Yang/p/3245439.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。