HTML5跨屏前端框架(Amaze UI)2.5.0 官方版【附教程】

Amaze UI 是中国首个开源 HTML5 跨屏前端框架，它是一个轻量级（所有 CSS 和 JS gzip 后 100 kB 左右）、 Mobile first 的前端框架， 基于开源社区流行前端框架编写。Amaze UI 汲取了很多优秀的社区资源，通过开源的形式来回馈社区。

Amaze UI介绍

移动而生

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

组件丰富，模块化

Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

本地化支持

相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。

轻量级，高性能

Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

Amaze UI特性

专注 UI

只分享单纯的 UI(View)，对配套技术不做限定，可以在 Backbone、Angular、Meteor 等框架中使用。

组件化，可复用、易扩展

基于 React 封装组件，不再疲于组织杂乱的 HTML 标签；组件可以按需组合、功能扩展方便。

高性能

React 所使用的 Virtual DOM 技术，能最大限度减少 DOM 操作，有效提高性能。

单向数据流

单向数据流可以简化操作，从 DOM 控制中解放出来，专注于业务逻辑。

Amaze UI怎么用

Amaze UI 使用教程

1、获取 Amaze UI

1.1下载文件

1.2使用 CDN

Amaze UI CDN： 域名解析服务由 DNSPod 分享，CDN 存储由又拍云分享。

http://cdn.amazeui.org/amazeui/2.4.0/css/amazeui.css

http://cdn.amazeui.org/amazeui/2.4.0/css/amazeui.min.css

http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.js

http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.min.js

http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.legacy.js

http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.legacy.min.js

http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.widgets.helper.js

http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.widgets.helper.min.js

1.3使用 Bower

bower install amazeui

1.4移植的插件

1.5获取源码

你可以从 GitHub 项目主页获取源代码。

2、文件及版本说明

2.1文件说明

amazeui.css / amazeui.js：包含 Amaze UI 所有的 CSS、JS。

amazeui.flat.css：圆角版 Amaze UI CSS，演示参见 1.x。

amazeui.legacy.js：为 IE 8 打包的 JS。

amazeui.widgets.helper.js： 供使用 Handlebars 的用户使用，其他用户请忽略，内含 Web 组件必须的 Handlebars helper 及 Web 组件模板 partials。

以上每个文件都有对应的 minified 文件。

2.2版本号说明

Amaze UI 遵循 Semantic Versioning 规范，版本格式采用 主版本号.次版本号.修订号 的形式，版本号递增规则如下：

主版本号：做了不兼容的API 修改，如整体风格变化、大规模重构等；

次版本号：做了向下兼容的功能性新增；

修订号：做了向下兼容的问题修正、细节调整等。

3、下载包目录结构

下载包种包含 Amaze UI 的 CSS、JS 文件，以及示例文件：

index.html - 空白 HTML 模板；

blog.html - 博客页面模板（预览）；

landing.html - Landing Page 模板（预览）；

login.html - 登录界面模板（预览）；

sidebar.html - 带边栏的文章模板（预览）；

admin-*.html - 简单的管理后台界面（预览）

在 app.css 中编写 CSS；

在 app.js 中编写 JavaScript；

图片资源可以放在 i 目录下。

AmazeUI

|-- assets

| 聽 |-- css

| 聽 | 聽 |-- amazeui.css 聽 聽 聽 聽 聽 聽 // Amaze UI 所有样式文件

| 聽 | 聽 |-- amazeui.min.css 聽 聽 聽 聽 聽 // 约 42 kB (gzipped)

| 聽 | 聽 `-- app.css

| 聽 |-- i

| 聽 | 聽 |-- 该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。

| 聽 | 聽 |-- favicon.png

| 聽 | 聽 `-- startup-640x1096.png

| 聽 `-- js

| 聽 聽 聽 |-- amazeui.js

| 聽 聽 聽 |-- amazeui.min.js 聽 聽 聽 聽 聽 聽 聽 聽// 约 56 kB (gzipped)

| 聽 聽 聽 |-- amazeui.widgets.helper.js

| 聽 聽 聽 |-- amazeui.widgets.helper.min.js

| 聽 聽 聽 |-- app.js

| 聽 聽 聽 `-- handlebars.min.js

|-- blog.html

|-- index.html

|-- landing.html

|-- login.html

|-- sidebar.html

`-- widget.html

4、创建一个页面

新建一个 HTML 文档，将下面的代码粘贴到文档中；

查看 CSS 组件及 JS 插件，拷贝符合的演示代码，粘贴到 区域，并按需调整；

一个简单的页面完成。

聽

聽

聽

聽

聽

聽 聽 聽 聽 content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽

聽 Hello Amaze UI.

Amaze UI 2.4.0 更新日志：2015-06-01