十大前端開發(fā)框架

十大前端開發(fā)框架隨著互聯(lián)網(wǎng)的不斷成熟以及我們越來越多的用各種移動端的設(shè)備訪問互聯(lián)網(wǎng)，Web設(shè)計師和Web開發(fā)者的工作也變得越來越復(fù)雜。十年前，一切都還簡單得多。那個時候，大部分用戶都是坐在桌子前通過一個大大的顯示器來瀏覽我們的網(wǎng)頁。960像素是當(dāng)時比較合理的網(wǎng)頁寬度。那些年我們的開發(fā)工作主要就是跟十幾個桌面瀏覽器打交道，并通過添加幾個瀏覽器的hack，來兼容詭異的舊版本IE瀏覽器。時至今日，隨著過去五六年間手持電子設(shè)備的突飛猛進，一切都變了樣。我們看到各種尺寸的智能手機和平板層出不窮，電子閱讀器，以及電視設(shè)備上的瀏覽器等也不斷涌現(xiàn)。這種設(shè)備的多樣性正在與日俱增?？梢灶A(yù)見，在不遠的將來，相對于使用臺式機，越來越多的人會使用移動設(shè)備來訪問互聯(lián)網(wǎng)。事實上，已經(jīng)有相當(dāng)數(shù)量的一部分人只通過智能手機上網(wǎng)。這意味著，我們這些Web設(shè)計師和開發(fā)者需要知道如何在龐大的移動端王國里呈現(xiàn)以及適配我們的產(chǎn)品，這至關(guān)重要。在撰寫本文的時候，盡管我們還沒徹底搞明白如何將桌面端呈現(xiàn)的全部內(nèi)容在手持設(shè)備中呈現(xiàn)同樣的效果，但是用于實現(xiàn)這一目標的技術(shù)以及工具正在變得越來越好。在不知道瀏覽設(shè)備屏幕大小的時候，最主要的策略就是使用響應(yīng)式網(wǎng)頁設(shè)計。它是一種根據(jù)設(shè)備瀏覽窗口的尺寸大小來輸出相應(yīng)頁面布局的方法。小型移動設(shè)備（如智能手機以及平板電腦）上的大多數(shù)瀏覽器會默認將一個網(wǎng)頁縮小到適應(yīng)自己的屏幕尺寸，然后用戶可以通過縮放以及滾動等方法瀏覽整個網(wǎng)頁。這種方法在技術(shù)上是可行的，但是從用戶體驗的角度上講卻比較糟糕。小屏幕上文字太小閱讀不方便，鏈接太小難以點擊，縮放以及滾動的操作多多少少會讓人在閱讀的時候分心。響應(yīng)式網(wǎng)頁設(shè)計利用同樣的HTML文檔來適配所有的終端設(shè)備，響應(yīng)式網(wǎng)頁設(shè)計會根據(jù)設(shè)備屏幕的大小加載不同的樣式，從而在不同的終端設(shè)備上呈現(xiàn)最優(yōu)的網(wǎng)頁布局。舉個例子，當(dāng)你在大屏幕桌面瀏覽器中查看一個網(wǎng)頁的時候，網(wǎng)頁的內(nèi)容可能是分為很多列的，并且有常見的導(dǎo)航條。如果你在小屏幕的智能手機上查看同樣的頁面，你會發(fā)現(xiàn)頁面的內(nèi)容呈現(xiàn)在同一列中，并且導(dǎo)航按鈕足夠大，點擊起來很方便。你可以在MediaQueries這個網(wǎng)站上看到很多響應(yīng)式網(wǎng)頁設(shè)計的案例。在你的瀏覽器中隨便點開一個設(shè)計案例，然后改變?yōu)g覽器窗口的大小，你會看到網(wǎng)頁的布局會根據(jù)窗口大小相應(yīng)變化。到目前為止，我們可以看出，響應(yīng)式網(wǎng)頁設(shè)計可以有效地幫助我們應(yīng)對日益增長的終端設(shè)備多樣性。那么在我們設(shè)計網(wǎng)頁的時候有哪些實際可用的工具以及技術(shù)可以用來實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計呢？我們每個人都需要成為web大師才能駕馭這門技術(shù)么？或者是利用我們已經(jīng)掌握的web基本知識就已經(jīng)足夠了？目前有什么工具可以幫到我們么？這時候前端開發(fā)框架華麗登場。響應(yīng)式網(wǎng)頁設(shè)計實現(xiàn)起來并不困難，但是要讓它在所有的目標設(shè)備上都正常運作會有一點小棘手?？蚣芸梢宰屵@一工作變得簡單。利用框架，你可以花最少的力氣創(chuàng)建響應(yīng)式且符合標準的網(wǎng)站，一切都很簡單并且具有一致性。使用框架有很多好處，比如說簡單快速，以及在不同的設(shè)備之間的一致性等等?？蚣茏畲蟮膬?yōu)勢就是簡單易用，即使只掌握少量的web知識，你也可以毫無障礙的使用它們。簡而言之，如果你認真對待目前的web開發(fā)工作，那么使用框架進行開發(fā)就不是可選項而是必須要做的事情。你的站點必須高度靈活以適應(yīng)不同的瀏覽器，平板，智能手機以及其他各種各樣的手持設(shè)備。一個前端開發(fā)框架其實就是一系列產(chǎn)品化的HTML/CSS/JavaScript組件的集合，我們可以在設(shè)計中使用它們。前端開發(fā)框架有很多，其中有一些寫得很棒。為了大家的使用便利，下文列舉了目前最強大應(yīng)用最廣泛的幾款前端開發(fā)框架。記住，這些框架并不僅僅是CSS柵格之類的一些東西，它們包括的是整套的前端開發(fā)框架。BootstrapBoostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優(yōu)美，直觀并且給力的web設(shè)計工具包，可以用來開發(fā)跨瀏覽器兼容并且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統(tǒng)以及一些常用的JavaScript插件。Bootstrap是用動態(tài)語言LESS寫的，主要包括四部分的內(nèi)容：腳手架一一全局樣式，響應(yīng)式的12列柵格布局系統(tǒng)。記住Bootstrap在默認情況下并不包括響應(yīng)式布局的功能。因此，如果你的設(shè)計需要實現(xiàn)響應(yīng)式布局，那么你需要手動開啟這項功能。基礎(chǔ)CSS——包括基礎(chǔ)的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎(chǔ)CSS為這些要素提供了優(yōu)雅，一致的多種樣式。組件收集了大量可以重用的組件，如下拉菜單(dropdowns)，按鈕組(buttongroups)，導(dǎo)航面板(navigationcontrol)包括：tabs,pills,lists標簽，面包屑導(dǎo)航(breadcrumbs)以及頁碼(pagination)，縮略圖(thumbnails)，進度條(progressbars)，媒體對象(mediaobjects)等等。JavaScript包括一系列jQuery的插件，這些插件可以實現(xiàn)組件的動態(tài)頁面效果。插件主要包括模態(tài)窗口(modals)，提示效果(tooltips)，“泡芙”效果(popovers)，滾動監(jiān)控(scrollspy)，旋轉(zhuǎn)木馬(carousel)，輸入提示(typeahead)，等等。Bootstrap已經(jīng)足夠強大，能夠?qū)崿F(xiàn)各種形式的Web界面。為了更加方便地利用Bootstrap進行開發(fā)，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。jQueryUIBootstrap對于jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把Bootstrap的清爽界面組件引入到j(luò)QueryUI中。jQueryMobileBootstrapTheme和上面提到的jQueryUI主題類似，這是一個為jQueryMobile建立的主題。如果你想讓用Bootstrap開發(fā)的網(wǎng)站在手機端也可以優(yōu)雅訪問，那么這個資源對你來說很方便易用。FuelUX它為Bootstrap添加了一些輕量的JavaScript控件。FuelUI安裝，修改，更新以及優(yōu)化都很簡單方便。StyleBBootstrap提供了自己的幾種界面風(fēng)格，StyleBootstrap提供了更多的配色選項，并且你可以給每個組件都應(yīng)用不同的配色。BootSwatchr——利用這個工具你可以立刻查看主題修改后的效果。對于每一次變動的效果，這個應(yīng)用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。Bootswatch提供大量免費的Bootstrap主題。Bootsnipp——在線前端框架交互組件制作工具，是一個供給設(shè)計師和開發(fā)者的基于BootstrapHTML/CSS/JavaScript架構(gòu)的免費元素。LayoutIt通過界面拖放生成器簡便快捷地創(chuàng)建基于Bootstrap的前端代碼。通過拖放動作將Bootstrap風(fēng)格的組件加入到你的個人設(shè)計里并且可以方便地修改他們的屬性，簡單便捷。FbootstrappFbootstrapp基于Bootstrap并且提供了跟Facebookiframeapps和設(shè)計相同的功能。包含用于所有標準組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導(dǎo)航等等，風(fēng)格與Facebook類似。BootMetroBootMetro框架的靈感來自于MetroUICSS，基于Bootstrap框架構(gòu)建，用于創(chuàng)建Windows8的Metro風(fēng)格的網(wǎng)站。它包括所有Bootstrap的功能，并添加了幾個額外的功能，比如頁面平鋪，應(yīng)用程序欄等等。KickstrapKickstrap是Bootstrap的一個變體。它基于Bootstrap，并在它的基礎(chǔ)上添加了許多app，主題以及附加功能。這使得這個框架可以單獨地用于構(gòu)建網(wǎng)站，而不需要額外安裝什么。你需要做的僅僅是把它放到你的網(wǎng)站上，然后用就可以了。App是一些頁面加載完成之后加載運行的JavaScript和CSS打包文件。默認加載的app有Knockout.js,Retina.js,FirebugLite,andUpdater，你也可以自行添加更多的app。選擇不同的主題可以讓你的網(wǎng)站在眾多Bootstrap構(gòu)建的類似網(wǎng)站中顯得與眾不同。附加功能是一些用來擴展BootstrapUI庫的附件，它們的語法基本相同或者相似。在《十大前端開發(fā)框架（上）》中我們了解了跟BootStrap相關(guān)的一系列前端開發(fā)框架，如果你對于Bootstrap已經(jīng)審美疲勞了，那么請深吸一口氣，接下來將帶給你一些其他口味的框架。讓我們先從Bootstrap最有力的競爭者Foundation說起。FoundationFoundation是一款強大的，功能豐富的并且支持響應(yīng)式布局的前端開發(fā)框架，你可以通過Foundation快速創(chuàng)建原型，利用它所包含的大量布局框架，元素以及最優(yōu)范例快速創(chuàng)建在各種設(shè)備上可以正常運行的網(wǎng)站以及app。Foundation在構(gòu)建的時候秉承移動優(yōu)先的策略，它擁有大量實用的語義化功能，并且使用Zepto類庫來取代jQuery，這樣可以帶來更好的用戶體驗，并且提高運行的速度。Foundation擁有一套12列的靈活可嵌套的網(wǎng)格系統(tǒng)，你可以用它快速創(chuàng)建適應(yīng)多種瀏覽設(shè)備的布局。它有很多的功能。它定義了很多的樣式，比如字體排版，按鈕，表單，以及多種多樣的導(dǎo)航控件。它也提供了很多的CSS組件，例如操作面板（panels），價格表（pricetables），進度條（progressbars），表格（tables）以及可以適應(yīng)不同設(shè)備的可伸縮視頻（flexvideo）。與此同時，F(xiàn)oundation還包括了很多的JavaScript插件，如下拉菜單（dropdowns），joyride（網(wǎng)站功能引導(dǎo)插件），magellan（網(wǎng)站固定導(dǎo)航插件），orbit（支持觸摸的響應(yīng)式圖片輪播插件），reveal（彈出框插件），sections（強大的tab插件）以及tooltips（工具提示）等。Foundation框架還提供了很多有用的擴展。模板（Stencils）Foundation框架中的所有UI元素都有Omnigrafflestencils以及矢量PDF兩種格式的下載，你可以用它們來方便快捷的繪制線框圖和原型圖。HTML模板一一HTML模板可以方便地用來快速創(chuàng)建頁面布局。你所要做的僅僅是復(fù)制得到模板代碼，然后丟到頁面的標簽之間就好了。圖標字體（IconFonts）——包含自定義圖標的一種網(wǎng)頁字體。SVG社交網(wǎng)絡(luò)圖標（SocialIcons）——一組不依賴分辨率的社交網(wǎng)絡(luò)圖標（可縮放矢量圖標）。響應(yīng)式表格一一Foundation框架中響應(yīng)式表格的實現(xiàn)機制是固定表格的左邊第一列，然后表格的其他列可以通過滾動條拖拉進行訪問。關(guān)閉帆布布局（Off-CanvasLayouts）這些布局可以允許一些網(wǎng)頁內(nèi)容或者導(dǎo)航控件在移動端設(shè)備上默認隱藏，當(dāng)瀏覽屏幕變大或者用戶進行相應(yīng)操作的時候這些內(nèi)容再出現(xiàn)。當(dāng)用戶進行相關(guān)操作的時候，網(wǎng)頁內(nèi)容或者導(dǎo)航控件將會滑動出現(xiàn)。如你所見，對于web開發(fā)者以及設(shè)計師來說，F(xiàn)oundation就像是一個巨大的寶藏。在下載框架的時候，你可以自定義下載框架的內(nèi)容。GroundworkCSSGroundworkCSS是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一個高級響應(yīng)式的HTML5,CSS以及JavaScript工具包，可以用于快速創(chuàng)建原型并且建立在各種瀏覽設(shè)備上可以正常工作的網(wǎng)站和app。GroundworkCSS擁有一個靈活，可嵌套的流式網(wǎng)格系統(tǒng)，方便你創(chuàng)建任何布局。這個框架有很多讓人印象深刻的功能，比如在平板以及移動端上的網(wǎng)格系統(tǒng)，當(dāng)屏幕的寬度小于768或者480像素時，頁面中原本并列排版的表格列(gridcolumn)會自動變?yōu)楠毩⒌男?，而不是折疊在一起。另一個很酷的功能是jQuery的響應(yīng)式文本(ResponsiveText)插件，這個插件可以動態(tài)調(diào)整頁面文字的大小以適應(yīng)瀏覽設(shè)備的屏幕大小。這個插件對于可伸縮的標題以及創(chuàng)建響應(yīng)式表格的時候特別有用。GroundworkCSS包含了大量的UI組件，如tabs、響應(yīng)式數(shù)據(jù)表格導(dǎo)航、按鈕、表單、響應(yīng)式導(dǎo)航控件、tiles(一套替代radio按鈕以及其他默認表單元素的優(yōu)雅組件)、工具提示、對話框、Cycle2(一款強大的，響應(yīng)式的內(nèi)容滑塊)以及其他很多的有用組件。它還提供了很多矢量社交網(wǎng)絡(luò)圖標以及圖標字體。你可以通過切換頁面上方的導(dǎo)航按鈕選擇不同的瀏覽設(shè)備要來查看這款框架的效果。通過這種方式，你可以測試在不同的瀏覽設(shè)備上各種組件的響應(yīng)式布局情況。GroundworkCSS的文檔寫的非常好，并且包含著很多的示例，為了讓你更快的上手，他還提供了多種響應(yīng)式的模板。對于這款框架，唯一我可以想到的缺點就是不能自定義要下載的框架內(nèi)容。GumbyGumby是一款基于Sass和Compass的簡單靈活并且穩(wěn)定的前端開發(fā)框架。它的流式-固定布局(fluid-fixedlayout)可以根據(jù)桌面端以及移動設(shè)備的分辨率自動優(yōu)化要呈現(xiàn)的網(wǎng)頁內(nèi)容。它支持多種網(wǎng)格布局，包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網(wǎng)格系統(tǒng)上進行設(shè)計。Gumby提供了一個功能豐富的UI工具包，包括按鈕，表單，移動端導(dǎo)航，tabs，跳轉(zhuǎn)鏈接(skiplinks)，撥動開關(guān)(togglesandswitches，可以方便快捷地切換元素的class，而不需要進行額外的js操作)，抽屜功能(drawers)，響應(yīng)式圖片以及retina圖片等等。為了緊跟最近的設(shè)計潮流，Gumby的UI元素中還包括了Metro風(fēng)格的扁平化設(shè)計，你也可以用Pretty風(fēng)格的漸變設(shè)計，或者按照你的想法糅合兩種設(shè)計風(fēng)格。該框架還提供了一套出眾的響應(yīng)式，擁有獨立分辨率的Entypo圖標，你可以在自己的web項目中盡情使用。Gumby有一個很好自定義下載選擇器，你可以自行配置各個組件的顏色，并且按自己的需求方便地下載。HTMLKickStartHTMLKickstart是一款可以用