web前端開發框架有哪些

本篇內容主要講解“web前端開發框架有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“web前端開發框架有哪些”吧!

　　一、Bootstrap

　　Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀并且給力的Web設計工具包，可以用來開發跨瀏覽器兼容并且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。

　　Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：

　　腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下并不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那么你需要手動開啟這項功能。

　　基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。

　　組件——收集了大量可以重用的組件，如下拉菜單(dropdowns)，按鈕組(button groups)，導航面板(navigation control)——包括：tabs,pills,lists標簽，面包屑導航(breadcrumbs)以及頁碼(pagination)，縮略圖(thumbnails)，進度條(progress bars)，媒體對象(media objects)等等。

　　JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口(modals)，提示效果(tool tips)，“泡芙”效果(popovers)，滾動監控(scrollspy)，旋轉木馬(carousel)，輸入提示(typeahead)，等等。

　　Bootstrap已經足夠強大，能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。

　　jQuery UI Bootstrap —— 對于jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。

　　jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery Mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那么這個資源對你來說很方便易用。

　　Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控件。Fuel UI 安裝，修改，更新以及優化都很簡單方便。

　　StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，并且你可以給每個組件都應用不同的配色。

　　BootSwatchr —— 利用這個工具你可以立刻查看主題修改后的效果。對于每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。

　　Bootswatch —— 提供大量免費的Bootstrap主題。

　　Bootsnipp —— 在線前端框架交互組件制作工具，是一個供給設計師和開發者的基于Bootstrap HTML/CSS/JavaScript 架構的免費元素。

　　LayoutIt —— 通過界面拖放生成器簡便快捷地創建基于Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里并且可以方便地修改他們的屬性，簡單便捷。

　　二、Fbootstrapp

　　Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和設計相同的功能。包含用于所有標準組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導航等等，風格與Facebook類似。

　　三、BootMetro

　　BootMetro框架的靈感來自于Metro UI CSS，基于Bootstrap 框架構建，用于創建Windows 8 的Metro風格的網站。它包括所有Bootstrap的功能，并添加了幾個額外的功能，比如頁面平鋪，應用程序欄等等。

　　四、Kickstrap

　　Kickstrap是Bootstrap的一個變體。它基于Bootstrap，并在它的基礎上添加了許多app，主題以及附加功能。這使得這個框架可以單獨地用于構建網站，而不需要額外安裝什么。你需要做的僅僅是把它放到你的網站上，然后用就可以了。

　　App 是一些頁面加載完成之后加載運行的JavaScript和CSS打包文件。默認加載的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行添加更多的app。

　　選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。

　　附加功能是一些用來擴展Bootstrap UI 庫的附件，它們的語法基本相同或者相似。

　　五、Foundation

　　Foundation 是一款強大的，功能豐富的并且支持響應式布局的前端開發框架，你可以通過Foundation快速創建原型，利用它所包含的大量布局框架，元素以及最優范例快速創建在各種設備上可以正常運行的網站以及app。Foundation在構建的時候秉承移動優先的策略，它擁有大量實用的語義化功能，并且使用Zepto類庫來取代jQuery，這樣可以帶來更好的用戶體驗，并且提高運行的速度。

　　Foundation擁有一套12列的靈活可嵌套的網格系統，你可以用它快速創建適應多種瀏覽設備的布局。它有很多的功能。它定義了很多的樣式，比如字體排版，按鈕，表單，以及多種多樣的導航控件。它也提供了很多的CSS組件，例如操作面板(panels)，價格表(price tables)，進度條(progress bars)，表格(tables)以及可以適應不同設備的可伸縮視頻(flex video)。與此同時，Foundation還包括了很多的JavaScript插件，如下拉菜單(dropdowns)，joyride(網站功能引導插件)，magellan(網站固定導航插件)，orbit(支持觸摸的響應式圖片輪播插件)，reveal(彈出框插件)，sections(強大的tab插件)以及tooltips(工具提示)等。

　　Foundation框架還提供了很多有用的擴展。

　　模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF兩種格式的下載，你可以用它們來方便快捷的繪制線框圖和原型圖。

　　HTML模板 —— HTML模板可以方便地用來快速創建頁面布局。你所要做的僅僅是復制得到模板代碼，然后丟到頁面的標簽之間就好了。

　　圖標字體(Icon Fonts) —— 包含自定義圖標的一種網頁字體。

　　SVG 社交網絡圖標(Social Icons)—— 一組不依賴分辨率的社交網絡圖標(可縮放矢量圖標)。

　　響應式表格——Foundation框架中響應式表格的實現機制是固定表格的左邊第一列，然后表格的其他列可以通過滾動條拖拉進行訪問。

　　關閉帆布布局(Off-Canvas Layouts)—— 這些布局可以允許一些網頁內容或者導航控件在移動端設備上默認隱藏，當瀏覽屏幕變大或者用戶進行相應操作的時候這些內容再出現。當用戶進行相關操作的時候，網頁內容或者導航控件將會滑動出現。

　　如你所見，對于Web開發者以及設計師來說，Foundation就像是一個巨大的寶藏。在下載框架的時候，你可以自定義下載框架的內容。

　　六、GroundworkCSS

　　GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一個高級響應式的HTML5，CSS以及JavaScript工具包，可以用于快速創建原型并且建立在各種瀏覽設備上可以正常工作的網站和app。

　　GroundworkCSS擁有一個靈活，可嵌套的流式網格系統，方便你創建任何布局。這個框架有很多讓人印象深刻的功能，比如在平板以及移動端上的網格系統，當屏幕的寬度小于768或者480像素時，頁面中原本并列排版的表格列(grid column)會自動變為獨立的行，而不是折疊在一起。另一個很酷的功能是jQuery的響應式文本(ResponsiveText)插件，這個插件可以動態調整頁面文字的大小以適應瀏覽設備的屏幕大小。這個插件對于可伸縮的標題以及創建響應式表格的時候特別有用。

　　GroundworkCSS包含了大量的UI組件，如tabs、響應式數據表格導航、按鈕、表單、響應式導航控件、tiles(一套替代radio按鈕以及其他默認表單元素的優雅組件)、工具提示、對話框、Cycle2(一款強大的，響應式的內容滑塊)以及其他很多的有用組件。它還提供了很多矢量社交網絡圖標以及圖標字體。

　　你可以通過切換頁面上方的導航按鈕選擇不同的瀏覽設備要來查看這款框架的效果。通過這種方式，你可以測試在不同的瀏覽設備上各種組件的響應式布局情況。

　　GroundworkCSS的文檔寫的非常好，并且包含著很多的示例，為了讓你更快的上手，他還提供了多種響應式的模板。對于這款框架，唯一我可以想到的缺點就是不能自定義要下載的框架內容。

　　七、Gumby

　　Gumby 是一款基于Sass和Compass的簡單靈活并且穩定的前端開發框架。

　　它的流式-固定布局(fluid-fixed layout)可以根據桌面端以及移動設備的分辨率自動優化要呈現的網頁內容。它支持多種網格布局，包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網格系統上進行設計。

　　Gumby提供了一個功能豐富的UI工具包，包括按鈕，表單，移動端導航，tabs，跳轉鏈接(skip links)，撥動開關(toggles and switches，可以方便快捷地切換元素的class，而不需要進行額外的js操作)，抽屜功能(drawers)，響應式圖片以及retina圖片等等。為了緊跟最近的設計潮流，Gumby的UI元素中還包括了Metro風格的扁平化設計，你也可以用Pretty風格的漸變設計，或者按照你的想法糅合兩種設計風格。該框架還提供了一套出眾的響應式，擁有獨立分辨率的Entypo圖標，你可以在自己的Web項目中盡情使用。

　　Gumby有一個很好自定義下載選擇器，你可以自行配置各個組件的顏色，并且按自己的需求方便地下載。

　　八、HTML KickStart

　　HTML Kickstart 是一款可以用來方便創建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干凈，符合標準以及跨瀏覽器兼容的代碼。

　　這款框架提供了多種樣式表，包括網格，排版，表單，按鈕，表格，列表以及一些跨瀏覽器兼容的Web組件比如JavaScript的幻燈片功能，tabs，面包屑導航，包含子菜單的菜單以及工具提示等等。

　　你可以使用99Lime UIKIT提供的UI組件來搭建你的產品線框圖。

　　九、IVORY

　　IVORY 是一款輕量，簡單但是強大的前端框架，可以用于320到1200像素寬度的響應式布局。它基于12列的響應式網格布局，包含表格，按鈕，表格，分頁，撥動開關，工具提示，手風琴，選項卡等網站中常用的組件和樣式。

　　當你需要一款輕量靈活，不需要額外的其他功能，并且適應不同瀏覽設備的框架時，IVORY是你最好的選擇。

　　十、Kube

　　最后，如果你的新項目需要一款實在的，不需要復雜的額外功能組件的，足夠簡單的框架，那么 Kube 將會是你正確的選擇。Kube是一款最小化的，支持響應式的前端框架，它沒有強加的樣式設計，因此給了你充分的自由來開發自己的樣式表。它提供了一些Web元素的基本樣式，比如網格，表單，排版，表格，按鈕，導航，鏈接以及圖片等等。

　　Kube框架包括一個簡潔的CSS文件用于方便地創建響應式布局，還包括了兩個JS文件來完成tab以及頁面的按鈕操作。如果你希望得到Kube最大化的靈活性以及個性化定制，那么你可以下載開發者版本(developer version)，這個版本包括了LESS文件(包括各種變量，mixins以及模塊)。

到此，相信大家對“web前端開發框架有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！