amazeui

开始使用 Amaze UI

Amaze UI 是一个轻量级（所有 CSS 和 JS gzip 后 100 kB 左右）、 Mobile first 的前端框架， 基于开源社区流行前端框架编写（使用、参考的项目列表）。

获取 Amaze UI

下载文件

Amaze UI v__VERSION__

离线文档：

HTML 版离线文档
Dash Docsets

项目地址：

代码片段：

JetBrains 系列编辑器
Sublime

详见 Amaze UI Snippets。

Starter Kit：

Gulp、NPM 构建的前端开发工作流，点击访问项目主页。

使用 CDN

官方 CDN

域名解析服务由 DNSPod 提供，CDN 存储由七牛提供。

http://cdn.amazeui.org/amazeui/__VERSION__/css/amazeui.css
http://cdn.amazeui.org/amazeui/__VERSION__/css/amazeui.min.css
http://cdn.amazeui.org/amazeui/__VERSION__/js/amazeui.js
http://cdn.amazeui.org/amazeui/__VERSION__/js/amazeui.min.js
http://cdn.amazeui.org/amazeui/__VERSION__/js/amazeui.ie8polyfill.js
http://cdn.amazeui.org/amazeui/__VERSION__/js/amazeui.ie8polyfill.min.js
http://cdn.amazeui.org/amazeui/__VERSION__/js/amazeui.widgets.helper.js
http://cdn.amazeui.org/amazeui/__VERSION__/js/amazeui.widgets.helper.min.js

cdnjs

面向国外的用户可以使用 cdnjs 提供的 CDN 服务（支持 HTTPS）。

使用 Bower

bower install amazeui

移植的插件（使用示例）

获取源码

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

文件及版本说明

文件说明

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

版本号说明

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

下载包目录结构

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

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

创建一个页面

  1. 新建一个 HTML 文档，将下面的代码粘贴到文档中；
  2. 查看 CSS 组件及 JS 插件，拷贝符合的演示代码，粘贴到 <body> 区域，并按需调整；
  3. 一个简单的页面完成。
<!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">
  <title>Hello Amaze UI</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

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

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <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">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <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>

<!--在这里编写你的代码-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

参与讨论

有任何使用问题，请在评论中留言，也欢迎大家发表意见、建议。

感谢大家对 Amaze UI 的关注和支持！

This site is open source. Improve this page.