HTML5(H5)常用的十大前端框架（一）

Foundation框架

Foundation是一個(gè)響應(yīng)式前端框架系列，可以輕松設(shè)計(jì)漂亮的響應(yīng)式網(wǎng)站，應(yīng)用程序和電子郵件，在任何設(shè)備上看起來(lái)都很棒。Foundation是語(yǔ)義，可讀，靈活且完全可定制的。我們不斷添加新的資源和代碼片段，包括這些方便的HTML模板，以幫助您入門(mén)！

特點(diǎn)：世界上最先進(jìn)的響應(yīng)式前端框架。快速為適用于任何類(lèi)型設(shè)備的站點(diǎn)創(chuàng)建原型和生產(chǎn)代碼。

總結(jié)：Foundation 算是框架界的元老啦，都說(shuō)框架去的早，而這個(gè)框架一直到現(xiàn)在依然這么的熱門(mén)，如果你比較介意 Bootstrap 開(kāi)發(fā)撞臉的尷尬事情，那么你可以考慮使用 Foundation 。即使你使用預(yù)定義的 UI 元素, 也不會(huì)與其他網(wǎng)站太像，就像官方說(shuō)的給開(kāi)發(fā)者更靈活的框架體驗(yàn)。

Bootstrap框架

Bootstrap是美國(guó)Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開(kāi)發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，使得 Web 開(kāi)發(fā)更加快捷。 Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫(xiě)成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門(mén)開(kāi)源項(xiàng)目，包括NASA的MSNBC（微軟全國(guó)廣播公司）的Breaking News都使用了該項(xiàng)目。國(guó)內(nèi)一些移動(dòng)開(kāi)發(fā)者較為熟悉的框架，如WeX5前端開(kāi)源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來(lái)。

包含內(nèi)容：

基本結(jié)構(gòu)：Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。

CSS：Bootstrap 自帶以下特性：全局的 CSS設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class，以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。

組件：Bootstrap 包含了十幾個(gè)可重用的組件，用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。

JavaScript 插件：Bootstrap包含了十幾個(gè)自定義的jQuery 插件。您可以直接包含所有的插件，也可以逐個(gè)包含這些插件。

定制：您可以定制Bootstrap的組件、LESS 變量和jQuery 插件來(lái)得到您自己的版本。

總結(jié)：Bootstrap 最大的優(yōu)勢(shì)就是它非常流行，流行就代表你有問(wèn)題就有很多人幫你解決問(wèn)題，就代表裝逼它就是利器，還有就是界面比較和諧，容易上手，關(guān)注它的小伙伴應(yīng)該發(fā)現(xiàn)最新 V4 版也開(kāi)始支持 FlexBox 布局，這是非常好的升級(jí)體驗(yàn)。劣勢(shì)是 class 命名不夠語(yǔ)義化，并且各種縮寫(xiě)，以至于我離了文檔就是個(gè)菜，最近開(kāi)始整混合 APP，選框架的時(shí)候首選就是它，但之前搞 PC 一直沒(méi)注意，后來(lái)搞混合右鍵屬性看它的時(shí)候，瞬間一陣涼風(fēng)襲來(lái)，Bootstrap 好小，小到我只好選擇別的框架。

AUI框架

AUI為一款輕量級(jí)前端UI框架，更偏重于CSS布局及樣式的構(gòu)造，通俗易懂的寫(xiě)法及模塊式的拼裝方便用戶自由擴(kuò)展。輕小的體積、靈活的擴(kuò)展性，大大提高移動(dòng)端項(xiàng)目的體驗(yàn)度和開(kāi)發(fā)效率。

在目前市場(chǎng)上的UI框架中，大多數(shù)的框架以JS來(lái)實(shí)現(xiàn)過(guò)多的功能和布局。當(dāng)然并不是否定JS在一個(gè)移動(dòng)前端框架中的作用性，既然是前端框架側(cè)重點(diǎn)要更多的考慮框架本身在一個(gè)項(xiàng)目中的資源消耗問(wèn)題及如何提高用戶的體驗(yàn)度。鑒于APICloud多窗口結(jié)構(gòu)及原生模塊的拼裝，所以在移動(dòng)端項(xiàng)目中AUI強(qiáng)調(diào)更多的是快速布局、靈活布局的實(shí)現(xiàn)，結(jié)合APICloud本身特性，提高開(kāi)發(fā)效率及用戶體驗(yàn)。

最近剛起來(lái)的AUI，雖然作者聲稱(chēng)是專(zhuān)為APICloud開(kāi)發(fā)者設(shè)計(jì)的一套UI框架，但實(shí)際它還是解決了很多移動(dòng)前端開(kāi)發(fā)的普遍問(wèn)題，是主要面向混合開(kāi)發(fā)的 CSS 框架?？雌饋?lái)作者比較猖狂，各種高級(jí) CSS3 遍地使用，這讓我也不得不去查查這些個(gè) CSS3 的兼容性。不負(fù)眾望果然選的都是兼容不錯(cuò)的屬性，哈哈了一頓激動(dòng)從前輩手上大膽認(rèn)識(shí)了幾個(gè)好東西，并且框架還提供了聊天界面、計(jì)數(shù)列表等組件，解決了很多復(fù)雜的讓我罵娘的布局，現(xiàn)在可以直接拿走就用。

總結(jié)：這個(gè)框架對(duì)我來(lái)說(shuō)有個(gè)優(yōu)點(diǎn)就是純 CSS 框架，自己以前也就用過(guò) Pure，自己有點(diǎn) JS 能力，如果不是復(fù)雜的效果，找個(gè)純 CSS 框架自己隨便改改就可以，而現(xiàn)在 CSS3 也已經(jīng)能夠做到動(dòng)畫(huà)，效率、質(zhì)量、高效全兼顧，所以還是選擇了這種 CSS 框架。有一點(diǎn)覺(jué)得不滿的是這框架的文檔真的好那什么，說(shuō)好的高大上呢。

Amaze UI 框架

第二個(gè)介紹的是AmazeUI，據(jù)官方說(shuō)是咱們中國(guó)首個(gè)HTML5跨屏前端框架。

最初使用它是因?yàn)楸咀鹩龅搅艘粋€(gè)愛(ài)糾結(jié)細(xì)節(jié)設(shè)計(jì)，有一次她跟我的字體較上真了，結(jié)果一句頂萬(wàn)句的 BOOS 夸了她，我只好根據(jù)她的想法去解決，結(jié)果最后找到了Amaze UI 框架，按照官方的話說(shuō)就是 "基于社區(qū)開(kāi)源項(xiàng)目構(gòu)建的一個(gè)跨屏前端框架，以移動(dòng)優(yōu)先，從小屏到大屏，最終實(shí)現(xiàn)所有屏幕適配，適應(yīng)移動(dòng)互聯(lián)潮流" 。但其實(shí)我就是看中它能解決國(guó)內(nèi)瀏覽器存在的跨屏適配和兼容性問(wèn)題。

總結(jié)：Amaze UI 總的來(lái)說(shuō)就是加入更多符合中國(guó)市場(chǎng)特性的元素，框架對(duì)跨屏、適配都做了的比較好的處理并且準(zhǔn)備一了一系列的常用的網(wǎng)頁(yè)組件，為減少搞兼容、適配各種敲鍵盤(pán)的加班狗們的工作時(shí)間做了不小的貢獻(xiàn)?？蚣苓€對(duì)中文排版優(yōu)化，兼容中國(guó)本土主流瀏覽器、輕量化，不僅適用于桌面端，還更更適合移動(dòng)端、包含一些封裝好的Widgets。不過(guò)自也就我感覺(jué) Amaze UI 文檔是否有點(diǎn)太那什么了，比如 “人們不會(huì)在乎jQuery的那點(diǎn)流量。”，說(shuō)實(shí)的在這真沒(méi)啥，不過(guò)我從來(lái)不會(huì)說(shuō)出來(lái)( 哈哈 )，代碼和設(shè)計(jì)上感覺(jué)沒(méi)太多突出的點(diǎn)。

Pure框架

一組小的，響應(yīng)迅速的CSS模塊，您可以在每個(gè)Web項(xiàng)目中使用它們。

特點(diǎn)：

CSS占用空間極小。

純凈是微不足道的。整套模塊的時(shí)鐘頻率為3.8KB *縮小和壓縮。在考慮移動(dòng)設(shè)備的情況下，對(duì)我們來(lái)說(shuō)保持文件大小很小很重要，并且仔細(xì)考慮了每一行CSS。如果您決定僅使用這些模塊的子集，則可以節(jié)省更多字節(jié)。

你的CSS基礎(chǔ)

Pure構(gòu)建于Normalize.css之上，為原生HTML元素以及最常見(jiàn)的UI組件提供布局和樣式。這就是你所需要的，沒(méi)有任何瑕疵。

以移動(dòng)為主題

Pure是開(kāi)箱即用的響應(yīng)，因此所有屏幕尺寸的元素都很棒。

堅(jiān)持你的方式

Pure具有最小的樣式，并鼓勵(lì)您在其上編寫(xiě)應(yīng)用程序樣式。它旨在讓您不受約束，并輕松覆蓋樣式。

創(chuàng)建響應(yīng)式布局

通過(guò)使用Grids，Menus等，可以輕松地為所有屏幕尺寸創(chuàng)建漂亮的響應(yīng)式布局。我們讓您輕松上手?？纯磶讉€(gè)不同的布局，并用堅(jiān)如磐石的基礎(chǔ)開(kāi)始您的下一個(gè)Web項(xiàng)目。

這個(gè)框架是我在做管理系統(tǒng)時(shí)接觸的，選擇使用也是因?yàn)榭蚣苄∏?，并且是?CSS，沒(méi)有太多的牽扯，好用來(lái)與其他框架快速結(jié)合使用。

注公眾號(hào) “OpenSourceDaily” ，每天推薦給你優(yōu)秀開(kāi)源項(xiàng)目

大多數(shù)人想到Web開(kāi)發(fā)時(shí)，通常會(huì)想到HTML或JavaScript，往往忽略了CSS，根據(jù)Wikipedia的說(shuō)法，CSS既是網(wǎng)頁(yè)中最重要也是最常被遺忘的部分之一，盡管它是萬(wàn)維網(wǎng)的三大基礎(chǔ)技術(shù)之一。

今天就和大家分享9個(gè)流行的、強(qiáng)大的前端開(kāi)源框架，幫助你輕松構(gòu)建漂亮的網(wǎng)站前端。
1、Bootstrap
Bootstrap無(wú)疑是最流行的CSS框架，它是最早的Web前端框架，由Twitter開(kāi)發(fā)。Bootstrap還提供了許多示例來(lái)幫助你入門(mén)。

使用Bootstrap，你可以將不同的組件和布局組合在一起，從而創(chuàng)建有趣的頁(yè)面設(shè)計(jì)。它還提供了大量詳細(xì)的文檔。目前在Github上已經(jīng)有1100多個(gè)貢獻(xiàn)者，19000多個(gè)提交。（Github地址：https://github.com/twbs/bootstrap）
2、PatternFly
PatternFly是Red Hat的開(kāi)源CSS框架，和Bootstrap不同的是，Bootstrap是為那些想要?jiǎng)?chuàng)建漂亮網(wǎng)站的人而設(shè)計(jì)的，而PatternFly主要專(zhuān)注于企業(yè)應(yīng)用程序開(kāi)發(fā)人員，提供諸如條形圖、圖表、導(dǎo)航之類(lèi)的組件，實(shí)際上Red Hat就是使用它創(chuàng)建了OpenShift。

除了靜態(tài)HTML，PatternFly還支持ReactJS框架，這是Facebook開(kāi)發(fā)的流行JavaScript框架。PatternFly具有許多適用于企業(yè)級(jí)應(yīng)用程序的高級(jí)組件，如條形圖，圖表，模式和布局。
PatternFly在GitHub上一共有1,050多個(gè)提交和44個(gè)貢獻(xiàn)者。（Github地址：https://github.com/patternfly/patternfly）
3、Material Components for the web
Material Components for the web(MDC Web)，是谷歌專(zhuān)為Web設(shè)計(jì)的全新前端框架。MDC Web可幫助開(kāi)發(fā)人員執(zhí)行Material Design，組件由谷歌的核心工程師團(tuán)隊(duì)和UX設(shè)計(jì)人員開(kāi)發(fā)。這些組件可以建立可靠的開(kāi)發(fā)工作流程，以構(gòu)建美觀且功能強(qiáng)大的Web項(xiàng)目。

MDC Web在Github上共有5700多個(gè)提交和349個(gè)貢獻(xiàn)者。（Github地址：https://github.com/material-components/material-components-web）
4、Pure
Bootstrap，Patternfly和MDC Web是功能非常強(qiáng)大的CSS框架，但它們可能非常繁瑣和復(fù)雜。如果你想要一個(gè)輕量級(jí)的CSS框架，可以嘗試Pure.css，它本身更接近于CSS編程，但又可以幫助你構(gòu)建一個(gè)不錯(cuò)的網(wǎng)頁(yè)。Pure是具有最小占用空間的輕量級(jí)CSS框架，它由Yahoo開(kāi)發(fā)，根據(jù)BSD許可是開(kāi)源的。

Pure在Github上共有565多個(gè)提交和59個(gè)貢獻(xiàn)者。（Github地址：https://github.com/pure-css/pure）
5、Foundation
Foundation聲稱(chēng)是世界上最先進(jìn)的響應(yīng)式前端框架。它提供了用于構(gòu)建專(zhuān)業(yè)網(wǎng)站的高級(jí)功能和教程。許多公司，組織都使用該框架，并且該框架具有大量可用的文檔。

Foundation在Github上有將近17000個(gè)提交和1000個(gè)貢獻(xiàn)者。（Github地址：https://github.com/foundation/foundation-sites）
6、Bulma
Bulma是一個(gè)基于Flexbox的開(kāi)源框架，可根據(jù)MIT許可證開(kāi)源。Bulma是一個(gè)非常輕量級(jí)的框架，因?yàn)樗恍枰粋€(gè)CSS文件。Bulma擁有簡(jiǎn)潔明了的文檔，可輕松選擇你想要的主題。它還具有許多Web組件，你可以在設(shè)計(jì)中使用它們。

Bulma在Github上有1400多個(gè)提交和300個(gè)貢獻(xiàn)者。（Github地址：https://github.com/jgthms/bulma）
7、Skeleton
如果說(shuō)還有什么框架比Pure更加輕量級(jí)，那一定是Skeleton。Skeleton庫(kù)只有大約400行，并且該框架僅提供一些基本的CSS框架組件。盡管如此，Skeleton還是提供了詳細(xì)的文檔來(lái)幫助你快速上手。

Skeleton在Github上共有167個(gè)提交和22個(gè)貢獻(xiàn)者，但它不是最活躍的項(xiàng)目，它最新一次的更新是在2014年。（Github地址：https://github.com/dhg/Skeleton）
8、Materialize
Materialize 是一個(gè)基于 Material Design風(fēng)格的一個(gè)現(xiàn)代化的響應(yīng)式前端框架，解決了最繁重的工作，結(jié)合你的自定義組件，為你提供默認(rèn)的樣式。Materialize的文檔頁(yè)面非常全面，并且很容易遵循。其組件頁(yè)面包括按鈕，卡片，導(dǎo)航等。

Materialize在Github上共有3800多個(gè)提交和250個(gè)貢獻(xiàn)者。（Github地址：https://github.com/Dogfalo/materialize）
9、Bootflat
Bootflat是從Twitter的Bootstrap派生的開(kāi)源CSS框架。與Bootstrap相比，Bootflat更簡(jiǎn)單，并且更加輕量級(jí)。Bootflat的文檔似乎幾乎受到了IKEA的啟發(fā)，大部分都是圖像，沒(méi)有太多的文字。

Bootflat是在MIT許可證下開(kāi)源的，在Github上有159個(gè)提交和8個(gè)貢獻(xiàn)者。（Github地址：https://github.com/bootflat/bootflat.github.io）

今天的項(xiàng)目大家覺(jué)得怎么樣嗎？如果你喜歡，請(qǐng)?jiān)谖恼碌撞苛粞浴Ⅻc(diǎn)贊或關(guān)注轉(zhuǎn)發(fā)，你的支持就是我持續(xù)更新的最大動(dòng)力！

OpenSourceDaily - 送給愛(ài)開(kāi)源的你

聯(lián)網(wǎng)的迅速發(fā)展，讓軟件行業(yè)成了更多年輕人的就業(yè)選擇。HTML5簡(jiǎn)單易學(xué)、門(mén)檻低，是Web時(shí)代前端開(kāi)發(fā)超好用的工具，除此之外，web前端開(kāi)發(fā)人員的就業(yè)薪資也遠(yuǎn)遠(yuǎn)高于其他行業(yè)。

資料顯示，初級(jí)web前端開(kāi)發(fā)人員的平均薪資在8K-10K左右，擁有一定工作經(jīng)驗(yàn)的人薪資普遍達(dá)到15K-20K。如此廣闊的前景當(dāng)然吸引了無(wú)數(shù)專(zhuān)業(yè)或非專(zhuān)業(yè)人士的加入。web前端用途范圍廣，下面小千就來(lái)給大家分享常見(jiàn)的HTML5框架。

web前端開(kāi)發(fā)中常見(jiàn)的HTML5框架有哪些?

Siimpler

Siimpler 是個(gè)簡(jiǎn)單的 HTML 開(kāi)發(fā)框架，他可以通過(guò)選擇你自己喜歡的部分，來(lái)幫助你迅速又簡(jiǎn)單地創(chuàng)建 HTML5 開(kāi)發(fā)結(jié)構(gòu)。網(wǎng)絡(luò)設(shè)計(jì)者們也可以通過(guò)使用 Siimpler 框架類(lèi)的文件和文件夾來(lái)無(wú)縫的開(kāi)始一個(gè) Web 項(xiàng)目。

Ionic

Ionic 是個(gè)神奇的框架和強(qiáng)大前端開(kāi)源系統(tǒng)，使用先進(jìn)的Web技術(shù)，比如CSS、HTML 和 JS 來(lái)創(chuàng)建令人驚嘆的手機(jī)應(yīng)用。

Foundation

Foundation 是世界上精妙的前端響應(yīng)框架，同時(shí)，它可以兼容所有的瀏覽器和網(wǎng)絡(luò)設(shè)備。Foundation 擁有移動(dòng)友好型的用戶接口，設(shè)置了許多關(guān)鍵特性。

Enyo

Enyo是一個(gè)開(kāi)源的 Jaa 框架，該框架能夠讓你創(chuàng)建頂級(jí)的 HTML5 應(yīng)用程序，該應(yīng)用程序能夠運(yùn)行在各種各樣的電子設(shè)備上，比如說(shuō)手機(jī)、臺(tái)式機(jī)、筆記本、電視以及Web應(yīng)用。

LimeJS

針對(duì)于所有的新的桌面瀏覽器和觸屏設(shè)備，LimeJS 對(duì)于有用戶經(jīng)驗(yàn)的游戲開(kāi)發(fā)者而言是較好的和較強(qiáng)大的開(kāi)發(fā)框架。

Bootstrap

Bootstrap能讓所有開(kāi)發(fā)者都能迅速上手、所有設(shè)備都可以適配、所有項(xiàng)目都適用。此外，bootstrap的官網(wǎng)也有很多教程提供。

juery UI

juery UI 主要分為交互、微件和效果庫(kù)3個(gè)部分，主打代碼開(kāi)源，操作繼承了juery 的簡(jiǎn)單特性，兼容各主流桌面瀏覽器。

web前端是當(dāng)下很多企業(yè)都會(huì)用到的軟件開(kāi)發(fā)，HTML5是移動(dòng)互聯(lián)網(wǎng)前端的主流開(kāi)發(fā)語(yǔ)言，目前還沒(méi)有任何一種前端開(kāi)發(fā)技術(shù)能夠取代HTML5。因此，無(wú)論是PC端還是APP端的應(yīng)用，前端樣式都離不開(kāi)HTML5。

從手機(jī)與電腦上網(wǎng)的使用率來(lái)看，從事HTML5或者Web相關(guān)的開(kāi)發(fā)工作，就業(yè)前景還是比較可觀的。而且，現(xiàn)在的網(wǎng)站開(kāi)發(fā)都往移動(dòng)設(shè)備上轉(zhuǎn)移，所以HTML5或者Web前端是眾望所歸。

這7個(gè)框架，你都會(huì)用嗎？

在線咨詢

上一篇：Javascript正則表達(dá)式示例之HTML標(biāo)簽及H
下一篇：用ASP寫(xiě)入TXT指定文本內(nèi)容(測(cè)試可用)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML5(H5)常用的十大前端框架（一）

您的項(xiàng)目需求