軟件介紹

Amaze UI是國內第一款開源的HTML5跨屏前端框架，這款軟件為用戶們提供了豐富的開發(fā)組件，我們可以通過這些組件來快速構建出HTML5網頁應用。而且Amaze UI官方版大大提升了網頁效果，讓你可以快速制作出網頁，提升開發(fā)人員的效率。

Amaze UI軟件簡介

Amaze UI采用國際最前沿的“組件式開發(fā)”以及“移動優(yōu)先”的設計理念，基于其豐富的組件，開發(fā)者可通過簡單拼裝即可快速構建出HTML5網頁應用，上線僅半年，Amaze UI就成為了國內最流行的前端框架，目前在Github上收獲Star數近萬，服務于全球50W開發(fā)者。

軟件特色

為移動而生

Amaze UI 以移動優(yōu)先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現所有屏幕適配，適應移動互聯潮流。

組件豐富，模塊化

Amaze UI 含近 20 個 CSS 組件、20 余 JS 組件，更有多個包含不同主題的 Web 組件，可快速構建界面出色、體驗優(yōu)秀的跨屏頁面，大幅提升開發(fā)效率。

本地化支持

相比國外框架，Amaze UI 關注中文排版，根據用戶代理調整字體，實現更好的中文排版效果；兼顧國內主流瀏覽器及 App 內置瀏覽器兼容支持。

輕量級，高性能

Amaze UI 面向 HTML5 開發(fā)，使用 CSS3 來做動畫交互，平滑、高效，更適合移動設備，讓 Web 應用更快速載入。

Amaze UI目標結構

amazeui

|-- HISTORY.md

|-- LICENSE

|-- README.md

|-- package.json

|-- dist        # 構建目錄

|-- docs        # 文檔

|-- fonts       # Icon font，目前使用了 http://staticfile.org/

|-- gulpfile.js # 構建配置文件

|-- js          # JS 文件

|-- less        # LESS 文件

|-- tools       # 相關工具

|-- vendor

`-- widget      # Web 組件

Amaze UI使用說明

amaze ui的使用通常有兩種方式：css、js文件復制到項目中；采用cdn方式。（在開發(fā)過程中采用第一種方式；開發(fā)結束需要部署時，采用第二種方式。

方法一

1.將amaze ui對應的zip下載。

解壓后查看該文件夾下的問assets文件，assets文件夾下又包括css、js文件夾，這兩個文件就是amaze ui中封裝，可供用用戶直接使用的樣式。

2.把上述提到的css、js文件夾拷貝到web項目的WebRoot下。

3.在項目中對樣式進行使用。

注：使用hbuilder開發(fā)非常便捷。

方法二

在官網上獲取js和css對應的地址，將他們引入到js中。但是使用amaze ui的js，需要jquery的支持，所以需要將其導入，導入次序要在js之前。

我們在class中使用amaze ui已經封裝好的格式。

附錄1

在開發(fā)過程中，使用的是hbuilder這個工具，如果將amaze ui的css、js導入到項目中，開發(fā)過程中工具本身會有提示；但是，當用戶訪問該網頁時，每次都會請求本地的css和js資源，會增加部署該項目的服務器的負擔。因此為了避免第二項問題，我們在部署項目時會改變成第二種方式。

常見問題

1、Amaze UI 目前沒有 xx 組件，有沒有推薦的？

首先，確保查看了每個欄目的下面的左側菜單的每個鏈接。如果你的窗口比較小， 左側的菜單是可以向下滾動，點小三角或者使用鼠標滾輪上下滾動。真的沒找到？那真是沒有。

2、拷貝頁面中的示例代碼粘貼以后沒有效果？

確保頁面中已經引入了 jQuery 以及 Amaze UI 的 CSS、JS，path/to/ 替換相應的路徑。

如果已經引入，請查看 Amaze UI CSS、JS 文件頂部的版本信息，確保引入的版本和示例要求的版本匹配。