H5的基本框架是什么?h5制作需要了解哪些框架呢?下面就和小編一起來看看吧!

　　1.bootstrap絕對是目前最流行、使用最廣泛的框架。它是一個美觀、直觀、功能強(qiáng)大的網(wǎng)頁設(shè)計工具包，可以用來開發(fā)跨瀏覽器兼容、美觀的網(wǎng)頁。關(guān)于免費建站，它提供了很多流行的UI組件，樣式簡單，網(wǎng)格系統(tǒng)和一些常用的JavaScript插件。Bootstrap用動態(tài)語言LESS編寫，主要包括四個部分:腳手架-全局風(fēng)格，響應(yīng)性12列網(wǎng)格布局系統(tǒng)。請記住，默認(rèn)情況下，引導(dǎo)不包括響應(yīng)布局功能。因此，如果您的設(shè)計需要實現(xiàn)響應(yīng)布局，您需要手動打開此功能。基本的CSS-包括基本的HTML頁面元素，如表格、表單、按鈕和圖像?；綜SS為這些元素提供了優(yōu)雅且一致的樣式。組件——收集了大量可重用的組件，比如下拉、按鈕組、分頁控件——包括標(biāo)簽、球、列表標(biāo)簽、面包屑、頁碼、縮略圖、進(jìn)度條等。JavaScript-包含一系列jQuery插件，可以實現(xiàn)組件的動態(tài)頁面效果。插件主要包括modals窗口、tips、popovers、scrollspy、carousel、typeahead等。Bootstrap足夠強(qiáng)大，可以實現(xiàn)各種形式的Web界面。許多工具和資源可以一起使用，以便更方便地與Bootstrap一起開發(fā)。這里有一些。JQueryUIBootstrap-這是一個非常好的JQuery和Bootstrap愛好者的資源，可以把Bootstrap的刷新接口組件引入JQueryUI。jquerymobilebiotstraptheme——類似于上面提到的jQueryUI主題，這是為jQueryMobile建立的一個主題。如果你希望用Bootstrap開發(fā)的網(wǎng)站可以在手機(jī)上優(yōu)雅地訪問，那么這個資源對你來說非常方便易用。fuelux——它給Bootstrap添加了一些輕量級的JavaScript控件。FuelUI易于安裝、修改、更新和優(yōu)化。StyleBootstrap。info-Bootstrap提供了幾種接口樣式，StyleBootstrap提供了新的顏色匹配選項，您可以對每個組件應(yīng)用不同的顏色匹配。bootswatchr-有了這個工具，你可以立刻看到修改后的主題的效果。對于每一個改變的效果，這個應(yīng)用都會生成一個唯一的URL給你和別人分享，你可以隨時修改你的主題。bootsatch-提供大量免費的引導(dǎo)主題。BootstrapHTML/CSS/JavaScript架構(gòu)的免費元素，是一款在線前端框架交互組件制作工具，面向設(shè)計人員和開發(fā)人員。layoutit-通過界面拖放生成器，簡單快速地創(chuàng)建基于Bootstrap的前端代碼。通過拖放將Bootstrap樣式組件添加到您的個人設(shè)計中既簡單又方便。

　　2.fboottrappfBootstrapp基于bootstrap，提供與Facebookiframeapps和design相同的功能。包含所有標(biāo)準(zhǔn)組件的基本CSS和HTML，包括排版、表單、按鈕、表格、網(wǎng)格、導(dǎo)航等。風(fēng)格類似于Facebook。

　　3.BootMetroBootMetro框架的靈感來源于MetroUICSS，MetroUICSS基于Bootstrap框架，用于創(chuàng)建Windows8的Metro風(fēng)格網(wǎng)站。它包含了所有Bootstrap功能，并增加了幾個附加功能，如頁面平鋪、應(yīng)用欄等。

　　4.KicktrapKicktrap是Bootstrap的變體。它以Bootstrap為基礎(chǔ)，增加了很多應(yīng)用、主題和附加功能。這使得該框架可以單獨用于構(gòu)建網(wǎng)站，而無需任何額外的安裝。關(guān)于網(wǎng)站模板，你只需要把它放在你的網(wǎng)站上，然后使用它。App是頁面加載后加載運(yùn)行的JavaScript和CSS打包文件。默認(rèn)加載的應(yīng)用有knowledge.js、retina.js、firebuglite、updater，可以添加自己的應(yīng)用。選擇不同的主題可以讓你的網(wǎng)站像Bootstrap一樣脫穎而出。附加函數(shù)是用來擴(kuò)展BootstrapUI庫的附件，語法基本相同或相似。

　　5.FoundationFoundation是一個功能強(qiáng)大的前端開發(fā)框架，支持響應(yīng)性布局。您可以通過Foundation快速創(chuàng)建原型，并使用其中包含的大量布局框架、元素和最佳范例，快速創(chuàng)建可以在各種設(shè)備上正常運(yùn)行的網(wǎng)站和應(yīng)用程序?；饡闪r，堅持移動第一戰(zhàn)略。它有很多實用的語義功能，用Zepto類庫代替jQuery，可以帶來更好的用戶體驗，提高運(yùn)行速度。Foundation有一個靈活可嵌套的12列網(wǎng)格系統(tǒng)，可以用來快速創(chuàng)建適合各種瀏覽設(shè)備的布局。它有很多功能。它定義了許多樣式，如字體布局、按鈕、表單和各種導(dǎo)航控件。它還提供了許多CSS組件，如操作面板、價格表、進(jìn)度條、表格和靈活的視頻，可以適應(yīng)不同的設(shè)備。與此同時，基金會還包括許多JavaScript插件，如下拉菜單、joyride、麥哲倫、軌道、顯示、部分和工具提示。基礎(chǔ)框架還提供了許多有用的擴(kuò)展。模板——基礎(chǔ)框架中的所有UI元素都下載在Omnigrafflestencils和vectorPDF中，可以方便快捷的繪制線框和原型圖。HTML模板——HTML模板可以用來快速創(chuàng)建頁面布局。您所要做的就是復(fù)制模板代碼，并將其放在頁面的標(biāo)簽之間。圖標(biāo)字體-包含自定義圖標(biāo)的網(wǎng)頁字體。SVG社交圖標(biāo)——一組不依賴分辨率的社交圖標(biāo)(可伸縮矢量圖標(biāo))。響應(yīng)式表——Foundation框架中響應(yīng)式表的實現(xiàn)機(jī)制是將第一列固定在表的左側(cè)，然后拖動滾動條就可以訪問表的其他列。off-CanvasLayouts)———這些布局可以允許在移動設(shè)備上默認(rèn)隱藏一些網(wǎng)頁內(nèi)容或?qū)Ш娇丶?，?dāng)瀏覽屏幕變大或用戶執(zhí)行相應(yīng)操作時，這些內(nèi)容會重新出現(xiàn)。當(dāng)用戶執(zhí)行相關(guān)操作時，網(wǎng)頁內(nèi)容或?qū)Ш娇丶瑒?。如你所見，對于網(wǎng)頁開發(fā)人員和設(shè)計師來說，基礎(chǔ)就像一個巨大的寶藏。下載框架時，可以自定義下載框架的內(nèi)容。

　　6.GroundworkCSSGroundworkCSS是前端框架系列中的一款新的小清新框架。它是一個基于Sass和Compass的高級響應(yīng)HTML5、CSS和JavaScript工具包，可以用來快速創(chuàng)建原型，構(gòu)建可以在各種瀏覽設(shè)備上正常工作的網(wǎng)站和應(yīng)用。地面工作中心有一個靈活的可嵌套的流式網(wǎng)格系統(tǒng)，方便您創(chuàng)建任何布局。這個框架有很多令人印象深刻的功能，比如平板電腦和移動終端上的網(wǎng)格系統(tǒng)。當(dāng)屏幕寬度小于768或480像素時，原本并排放置在頁面中的網(wǎng)格列將自動成為獨立的行，而不是折疊在一起。另一個很酷的特性是jQuery的ResponsiveText插件，它可以動態(tài)調(diào)整頁面文本大小，以適應(yīng)瀏覽設(shè)備的屏幕大小。這個插件對于可伸縮的標(biāo)題和創(chuàng)建響應(yīng)表特別有用?；A(chǔ)工作包含大量的用戶界面組件，如選項卡、響應(yīng)數(shù)據(jù)表導(dǎo)航、按鈕、表單、響應(yīng)導(dǎo)航控件、切片(一組替換單選按鈕和其他默認(rèn)表單元素的優(yōu)雅組件)、工具提示、對話框、Cycle2(一個強(qiáng)大且響應(yīng)迅速的內(nèi)容滑塊)和許多其他有用的組件。它還提供了許多矢量社交網(wǎng)絡(luò)圖標(biāo)和圖標(biāo)字體。您可以通過切換頁面頂部的導(dǎo)航按鈕來選擇不同的瀏覽設(shè)備，以查看此框架的效果。這樣，您可以在不同的瀏覽設(shè)備上測試各種組件的響應(yīng)布局。《基礎(chǔ)工作》文件寫得很好，包含了許多例子。為了讓您快速入門，它還提供了各種響應(yīng)模板。對于這個框架，我能想到的唯一缺點就是不能自定義要下載的框架內(nèi)容。

　　7.gumbyumby是一個簡單、靈活、穩(wěn)定的基于Sass和Compass的前端開發(fā)框架。它的流體固定布局可以根據(jù)桌面和移動設(shè)備的分辨率自動優(yōu)化要呈現(xiàn)的網(wǎng)頁內(nèi)容。它支持多種網(wǎng)格布局，包括混合列的嵌套模式。Gumby為了方便，提供了兩套PSD模板。