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

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

Amaze UI介绍

移动而生

foundation

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

组件丰富，模块化

web

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

本地化支持

chinese

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

轻量级，高性能

mobile

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 模板（预览）；

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

| | |-- app-icon72x72@2x.png

| | |-- 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 插件，拷贝符合的演示代码，粘贴到 <body> 区域，并按需调整；

一个简单的页面完成。

<!doctype html>

<html class="no-js">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="description" content="">

<meta name="keywords" content="">

<meta name="viewport"

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

<title>Hello Amaze UI</title>

<meta name="renderer" content="webkit">

<meta http-equiv="Cache-Control" content="no-siteapp"/>

<link rel="icon" type="image/png" href="assets/i/favicon.png">

<meta name="mobile-web-app-capable" content="yes">

<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="apple-mobile-web-app-title" content="Amaze UI"/>

<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">

<meta name="msapplication-TileColor" content="#0e90d2">

<link rel="stylesheet" href="assets/css/amazeui.min.css">

<link rel="stylesheet" href="assets/css/app.css">

</head>

<body>

<p>

Hello Amaze UI.

</p>

<script src="assets/js/jquery.min.js"></script>

<!--[if lte IE 8 ]>

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

<![endif]-->

</body>

</html>

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

CSS:

Improved Article增加图片最大宽度限制样式。

JS:

Fixed #587 修复cookie设置expires无效问题（Thx to @Stephenzxb）。

PC官方版

安卓官方手机版

IOS官方手机版

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

相关软件

Netman网络人绿色版V3.0

网络人NetmanV7.133 绿色版

HTCAD 免费版(内带注册机)v5.6

TMPGEnc DVD Author v3.0.9 绿色汉化免费版

TMPGEnc DVD Author V1.5.15.49 汉化补丁

tmpgenc 4.0 xpress 绿色汉化中文免费版

渲染巨匠(lightscape) 3.2 汉化版1.0 最新版

EnableRightClick解除右键限制的插件

拳皇(The King of Fighters) 2002

拳皇(The King of Fighters) 98

Amaze UI介绍

Amaze UI怎么用

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

HTML5跨屏前端框架(Amaze UI)截图

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

扩展阅读

本类最新软件

本类软件推荐