必須收藏14款響應(yīng)式布局的前端開發(fā)框架

前端開發(fā)并不是一個容易的工作，不僅需要掌握HTML、CSS和JavaScript，針對不同的瀏覽器版本和平臺，還需要了解如何設(shè)計出跨平臺的網(wǎng)站。如今隨著響應(yīng)式設(shè)計的流行，前端開發(fā)變得越來越困難，且花費的時間更長。

本文收集了14個響應(yīng)式前端開發(fā)框架，可以幫助前端開發(fā)人員大大簡化開發(fā)過程。針對每個框架，文中均指出了它所包含的UI組件及JavaScript插件。幾乎所有的框架都采用了響應(yīng)式網(wǎng)格系統(tǒng)。

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

• 跨瀏覽器。這一點已被證實。
• 一致性。UI組件，如導(dǎo)航、按鈕、標(biāo)簽、表單、下拉框、表格……，在設(shè)計上保持風(fēng)格一致。
• 快速開發(fā)。你可以快速、容易地構(gòu)建布局。這些框架都配有詳細(xì)的說明文檔。
• 響應(yīng)式。所有CSS組件及JavaScript插件可以很好地從桌面過渡到移動設(shè)備上。

InK

Ink為一個界面工具包，用于快速開發(fā)Web界面，具有易于使用、易于擴(kuò)展特點。它可以為構(gòu)建布局提供解決方案，可以展示普通的界面元素，可以實現(xiàn)以內(nèi)容為中心、對用戶友好的交互方式。

• HTML&CSS：布局、導(dǎo)航、排版、圖標(biāo)、表單、提示框、表格
• JS：Gallery、表格、樹視圖、排序列表、日期選擇插件、制表符、表單驗證及一些行為（停靠、折疊、關(guān)閉）
• 其他：Sass Mixins

GroundworkCSS Beta

GroundworkCSS是一個基于Sass預(yù)處理器的開源項目 ，主要用于快速構(gòu)建響應(yīng)式Web應(yīng)用程序。擁有一個靈活的、可嵌套的網(wǎng)格系統(tǒng)，可以創(chuàng)建適應(yīng)多種瀏覽設(shè)備的布局。GroundworkCSS還提供多種UI 組件，如導(dǎo)航、按鈕、圖標(biāo)、表單、Tabs、對話框、工具提示等等。

• HTML&CSS：網(wǎng)格、布局、排版、按鍵、標(biāo)題、表單、圖標(biāo)、社交圖標(biāo)、響應(yīng)式文本、對話框、工具提示
• JS：導(dǎo)航、制表符（Tab）、提示框、Cycle2
• 其他：Sass Mixins

Ivory

這是一個靈活、強(qiáng)大的響應(yīng)式Web框架，使Web開發(fā)更快速、更簡單。

• HTML&CSS：網(wǎng)格、排版、表單、按鈕、提示框、頁碼、面包屑導(dǎo)航（breadcrumb）、列表、表格
• JS：提示框、制表符（Tab）、切換開關(guān)（Toggle switch）、折疊

ZURB

Foundation由ZURB公司設(shè)計，ZURB是一家產(chǎn)品設(shè)計公司，位于加州坎貝爾。Foundation為最先進(jìn)的響應(yīng)式前端開發(fā)框架，它擁有很多布局模板、CSS樣式表及自己開發(fā)的優(yōu)秀JavaScript插件。

• HTML&CSS：網(wǎng)格、布局模板、圖標(biāo)字體、響應(yīng)式表格、SVG格式的社交圖標(biāo)、頁碼、面包屑導(dǎo)航（breadcrumbs）、側(cè)導(dǎo)航、按鍵、排版、標(biāo)簽、提示框、面板、價格表、進(jìn)度欄、表格、縮略圖
• JS：下拉按鈕、拆分按鈕、轉(zhuǎn)換開關(guān)、Flex視頻、燈箱、下拉、響應(yīng)式布局（通過轉(zhuǎn)換圖片大小來實現(xiàn)）、旅游導(dǎo)航、麥哲倫全局導(dǎo)航（Magellan Sticky Nav）、Orbit圖片滑動幻燈片插件等
• 其他：可定制皮膚表單（Custom Skinned Forms）、SCSS Mixin

Grumby

Gumby 2基于Sass開發(fā)。Sass為功能強(qiáng)大的CSS預(yù)處理器，利用它可以快速開發(fā)Gumby。

• HTML&CSS：網(wǎng)格、表單、按鈕、導(dǎo)航、標(biāo)簽、Entypo圖標(biāo)
• JS：下拉、浮窗、制表符（Tab）、開關(guān)與轉(zhuǎn)換（Toggles & Switches）
• 其他：可定制皮膚表單（Custom Skinned Forms）、SASS和Compass

HTML KickStart

該框架集合了HTML5、CSS和JavaScript，幫助開發(fā)人員快速開發(fā)Web產(chǎn)品。它覆蓋了所有UI組件，同時也包含一些有用的JavaScript插件。

• HTML&CSS：網(wǎng)格、排版按鈕、列表、表格、圖標(biāo)、面包屑導(dǎo)航、圖片、表單
• JS：菜單、代碼高亮插件、制表符（Tab）、幻燈片播放、表單驗證
• 其他：CSS幫助文檔

Maxmertkit

Maxmertkit擁有完整的文檔，包含大量實例，并且提供了拖拽生成代碼的功能。

• HTML&CSS：網(wǎng)格、布局、徽章、按鈕、表單、圖標(biāo)、標(biāo)簽、菜單、進(jìn)度欄、表格、下拉、工具提示
• JS：按鈕、旋轉(zhuǎn)木馬、通知、彈出框、滾動條、制表符（Tab）
• 其他： Sass、Coffee腳本語言

Twitter Bootstrap

大家對Twitter Bootstrap已十分熟悉了。憑借全面的UI組件、易用的網(wǎng)格和組件，Bootstrap已成為眾多設(shè)計者和開發(fā)者最喜歡的快速開發(fā)工具?，F(xiàn)在已經(jīng)有很多第三方Bootstrap程序和JavaScript插件可供使用。

• HTML&CSS：網(wǎng)格、布局、排版、編碼、表格、表單、按鍵、圖片、圖標(biāo)、按鈕組、導(dǎo)航、面包屑導(dǎo)航、頁碼、標(biāo)簽、徽章、縮略圖、提示框、進(jìn)度欄
• JS：模態(tài)窗口（Modals）、提示效果（Tool Tips）、“泡芙”效果（Popovers）、滾動監(jiān)控（Scrollspy）、旋轉(zhuǎn)木馬（Carousel）、輸入提示（Typeahead）等等。
• 其他：定制器（Customizer）、LESS CSS

Skeleton

Skeleton 是一個小的JS和CSS文件集合，可幫你快速開發(fā)漂亮的網(wǎng)站，適合各種屏幕設(shè)備，包括手機(jī)。Skeleton基于960 Grid開發(fā)，是一個UI框架。

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

Kube

Kube是一款最小化的，支持響應(yīng)式的前端框架，包括一個簡潔的CSS文件，用于方便地創(chuàng)建響應(yīng)式布局，包括了兩個JS文件來完成Tab以及頁面的按鈕操作。

• HTML&CSS：排版、網(wǎng)格、表單、表格、按鈕、導(dǎo)航、圖標(biāo)
• JS：按鈕、制表符（Tab）
• 其他： LESS CSS

Helium

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

• HTML&CSS：網(wǎng)格、按鈕、排版、表單
• JS：下拉、表單驗證
• 其他：Sass、Compass

The Markup Framework

Markup是一套集布局、小組件、UI組件和字體排版樣式為一體的框架。它可以作為你設(shè)計自己網(wǎng)站的起點。

• HTML&CSS：布局、網(wǎng)格、排版、表單、按鈕、面包屑導(dǎo)航、導(dǎo)航列表、導(dǎo)航菜單
• JS：沒有JavaScripts，只有單純的CSS

Topcoat

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

• HTML&CSS：圖標(biāo)、字體、按鍵、面包屑導(dǎo)航、表單、下拉、滑動開關(guān)、選擇、滾動條、切換按鈕
• JS：沒有JavaScripts，只有單純的CSS

PureCSS

Pure是一個相當(dāng)小的框架，壓縮及最小化后僅有5.7KB。它沒有使用任何JavaScript，只是HTML和CSS。該CSS框架為響應(yīng)式布局，采用模塊化結(jié)構(gòu)，每個模塊的樣式可以單獨使用。

• HTML&CSS：網(wǎng)格、排版、表單、按鍵、表格、菜單
• JS：沒有JavaScripts，只有單純的CSS
• 其他：程序皮膚制作工具（Skin Builder）、YU 庫。

結(jié)論

根據(jù)你的需要，選擇可以與設(shè)計相匹配的框架。我們不應(yīng)該根據(jù)框架來構(gòu)建網(wǎng)站，因為它會很大程度上限制設(shè)計者的思維。

如果前端設(shè)計/布局不是那么重要，那么我們可以選擇使用某一框架。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章名稱：必須收藏14款響應(yīng)式布局的前端開發(fā)框架
網(wǎng)址分享：http://bm7419.com/news23/324373.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、定制開發(fā)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站策劃、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)