html5移動(dòng)框架：Framework7、SUI Mobile、FrozenUI、Amaze UI、MUI、WeUI、VUX、WEEX、antd-mobile、vue-carbon、uiKit、H-ui、layui、vonic等等。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

移動(dòng)Web UI庫(kù)（H5框架）列表

Framework7

Framework7 是一個(gè)開(kāi)源免費(fèi)的框架?？梢杂脕?lái)開(kāi)發(fā)混合移動(dòng)應(yīng)用（原生和 HTML 混合）或者開(kāi)發(fā) iOS & Android 風(fēng)格的 WEB APP。也可以用來(lái)作為原型開(kāi)發(fā)工具，可以迅速創(chuàng)建一個(gè)應(yīng)用的原型。

使用時(shí)只需要一個(gè)基本的 HTML 布局，并且把 Framework7 的 CSS 和 JS 文件引入即可！Framework7 不會(huì)強(qiáng)制你寫(xiě)任何自定義的標(biāo)簽，也不會(huì)通過(guò) JS 來(lái)生成任何額外的內(nèi)容。你不需要通過(guò) JS 或者 JSON 來(lái)寫(xiě)頁(yè)面，只需要普通的 HTML 就可以。

Framework7 有大量可以直接使用的 UI 組件和工具，比如 modals,popup,action sheet, popover, list views, media lists, tabs, side panels, layout grid, preloader, form elements 等。大部分的組件你都完全不需要寫(xiě)任何 JS 代碼。

SUI Mobile

MSUI 是阿里巴巴共享業(yè)務(wù)事業(yè)部UED團(tuán)隊(duì)的作品。目的是為了手機(jī)H5頁(yè)面提供一個(gè)常用的組件庫(kù)，減少重復(fù)工作。

SUI Mobile 是一套基于 Framework7 開(kāi)發(fā)的UI庫(kù)。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開(kāi)發(fā)跨平臺(tái)Web App。

FrozenUI

Frozen UI是一個(gè)開(kāi)源的簡(jiǎn)單易用，輕量快捷的移動(dòng)端UI框架?；谑諵樣式規(guī)范，選取最常用的組件，

做成手Q公用離線包減少請(qǐng)求，升級(jí)方式友好，文檔完善，目前全面應(yīng)用在騰訊手Q增值業(yè)務(wù)中。

Amaze UI

中國(guó)首個(gè)開(kāi)源 HTML5 跨屏前端框架，相比國(guó)外框架，Amaze UI 關(guān)注中文排版，根據(jù)用戶代理調(diào)整字體，實(shí)現(xiàn)更好的中文排版效果；兼顧國(guó)內(nèi)主流瀏覽器及 App 內(nèi)置瀏覽器兼容支持。

Amaze UI 以移動(dòng)優(yōu)先（Mobile first）為理念，從小屏逐步擴(kuò)展到大屏，最終實(shí)現(xiàn)所有屏幕適配，適應(yīng)移動(dòng)互聯(lián)潮流。

MUI

最接近原生APP體驗(yàn)的高性能前端框架。

WeUI

WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。

VUX

Vux（讀音 [v’ju:z]，同views）是基于WeUI和Vue(2.x)開(kāi)發(fā)的移動(dòng)端UI組件庫(kù)，主要服務(wù)于微信頁(yè)面。

基于webpack+vue-loader+vux可以快速開(kāi)發(fā)移動(dòng)端頁(yè)面，配合vux-loader方便你在WeUI的基礎(chǔ)上定制需要的樣式。

vux-loader保證了組件按需使用，因此不用擔(dān)心最終打包了整個(gè)vux的組件庫(kù)代碼。

WEEX

Weex 是一套簡(jiǎn)單易用的跨平臺(tái)開(kāi)發(fā)方案，能以 web 的開(kāi)發(fā)體驗(yàn)構(gòu)建高性能、可擴(kuò)展的 native 應(yīng)用，為了做到這些，Weex 與 Vue 合作，使用 Vue 作為上層框架，并遵循 W3C 標(biāo)準(zhǔn)實(shí)現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API，這樣一來(lái)，你甚至可以使用其他框架驅(qū)動(dòng) Weex，打造三端一致的 native 應(yīng)用。

Ant Design Mobile

antd-mobile 是 Ant Design 的移動(dòng)規(guī)范的 React 實(shí)現(xiàn)，服務(wù)于螞蟻及口碑無(wú)線業(yè)務(wù)。

vue-carbon

基于 vuejs 1.0 開(kāi)發(fā) material design 風(fēng)格的移動(dòng)端 WEB UI 庫(kù), 設(shè)計(jì)資源參考 CARBON FrameWork7。

uiKit

uiKit是一款輕量級(jí)、模塊化的前端框架，可快速構(gòu)建強(qiáng)大的web前端界面。

H-ui

H-ui是輕量級(jí)前端框架，簡(jiǎn)單免費(fèi)，兼容性好，適用于中國(guó)網(wǎng)站。

layui

Layui 誕生于2016年金秋，是一款帶著濃烈情懷的國(guó)產(chǎn)前端UI框架，她追求極簡(jiǎn)，又不失豐盈的內(nèi)在，說(shuō)她是史上最輕量的結(jié)晶，似乎并不為過(guò)。一切都源自于她對(duì)原生態(tài)的執(zhí)著，對(duì)前端社區(qū)的那些噪雜聲音的過(guò)濾，以及她本身的精心雕琢。

YDUI Touch

YDUI Touch 專為移動(dòng)端打造，在技術(shù)實(shí)現(xiàn)、交互設(shè)計(jì)上兼容主流移動(dòng)設(shè)備，保證代碼輕、性能高;使用 Flex 技術(shù)，靈活自如地對(duì)齊、收縮、擴(kuò)展元素，輕松搞定移動(dòng)頁(yè)面布局;實(shí)現(xiàn)強(qiáng)大的屏幕適配布局，等比例適配所有屏幕。什么？用得不開(kāi)心？輕松切換 px;自定義Javascript組件、Less文件、Less變量，定制一份屬于自己的YDUI。

sheral

基于sandal（基礎(chǔ)sass庫(kù)）擴(kuò)展的移動(dòng)端UI庫(kù)。具體設(shè)計(jì)思想可參看sheral——一個(gè)方便定制及擴(kuò)展的UI組件庫(kù)

vonic

一個(gè)基于 vue.js 和 ionic 樣式的 UI 框架，用于快速構(gòu)建移動(dòng)端單頁(yè)應(yīng)用。

Mint UI

基于 Vue.js 的移動(dòng)端組件庫(kù)

Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開(kāi)發(fā)需要。通過(guò)它，可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁(yè)面，提升開(kāi)發(fā)效率。

真正意義上的按需加載組件。可以只加載聲明過(guò)的組件及其樣式文件，無(wú)需再糾結(jié)文件體積過(guò)大。

考慮到移動(dòng)端的性能門檻，Mint UI 采用 CSS3 處理各種動(dòng)效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗(yàn)。

依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。

Muse-UI

基于 Vue 2.0 和 Material Desigin 的 UI 組件庫(kù)

1.組件豐富

Muse UI 基本實(shí)現(xiàn)了 Material Design 設(shè)計(jì)規(guī)范類的所有組件，另外還開(kāi)發(fā)許多的功能性的組件

2.可定制

Muse UI 使用less文件，所有的顏色都有一個(gè)變量維護(hù)，通過(guò)編寫(xiě) less 文件完成自定義主題，另外組件內(nèi)部也提供一些修改效果的參數(shù)

3.基于 Vue 2.0

Muse UI 基于 Vue2.0 開(kāi)發(fā)，Vue2.0是當(dāng)下最快的前端框架之一，小巧，api友好，可用于開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。

jQuery WeUI

jQuery WeUI 是專為微信公眾賬號(hào)開(kāi)發(fā)而設(shè)計(jì)的一個(gè)簡(jiǎn)潔而強(qiáng)大的UI庫(kù)，包含全部WeUI官方的CSS組件，并且額外提供了大量的拓展組件，豐富的組件庫(kù)可以極大減少前端開(kāi)發(fā)時(shí)間。

jQuery WeUI 的最大特點(diǎn)是它只提供UI組件，并不會(huì)對(duì)項(xiàng)目所使用的框架和其他庫(kù)有任何的限制，幾乎可以在任何環(huán)境下使用。無(wú)論你的項(xiàng)目是基于jQuery，還是 React, Angular, Vue， 你都會(huì)發(fā)現(xiàn) jQuery WeUI 能非常方便的和他們結(jié)合使用。既是你的項(xiàng)目是一個(gè)有很悠久歷史的老項(xiàng)目，也幾乎可以做到拿來(lái)即用。

國(guó)外官網(wǎng)：http://jqweui.com/

QMUI Web

QMUI Web 是一個(gè)專注 Web UI 開(kāi)發(fā)，幫助開(kāi)發(fā)者快速實(shí)現(xiàn)特定的一整套設(shè)計(jì)的框架。

框架主要由一個(gè)強(qiáng)大的 Sass 方法合集與內(nèi)置的工作流構(gòu)成。通過(guò) QMUI Web，開(kāi)發(fā)者可以很輕松地提高 Web UI 開(kāi)發(fā)的效率，同時(shí)保持了項(xiàng)目的高可維護(hù)性與穩(wěn)健。

該框架同步有針對(duì)Android和IOS風(fēng)格的移動(dòng)UI框架。

推薦教程：《html視頻教程》