Amaze UI 的布局示例

这里为开发者提供几个比较常见的 Amaze UI 的布局示例，仅供参考，后续会不断更新更多的优秀示例。

PS:关于图标显示异常的说明：

为避免 Mixed Content 错误，Icon Font 的 URL 没有添加协议，直接使用磁盘路径 file:///... 打开时示例页面时无法正常显示图标，请放在 HTTP 服务中查看。

在最新的下载包中，我们已经将字体路径替换为本地路径！

• 使用 JetBrais 系（WebStorm 等）打开示例文件夹，然后在编辑器里点预览按钮；
  
• cd 到示例目录，python -m SimpleHTTPServer；
  
• 或者使用其他 HTTP 服务器。
  

1.示例说明

1.1展示页面

使用组件说明：
CSS 部分：网格 图标 按钮 表单 文章页 导航条 辅助类
JS 插件部分：下拉组件 滚动侦测

1.2登录页面

使用组件说明：
CSS 部分：网格 图标 按钮 按钮组 表单

1.3博客页面

使用组件说明：
CSS 部分：网格 等宽布局 图标 按钮 面板 列表 分页
JS 插件部分：下拉组件

1.4博客侧栏页面

1.5管理后台模板

• index 页面
  
• user 页面
  
• gallery 页面
  
• table 页面
  
• form 页面
  
• help 页面
  
• log 页面
  
• 404 页面

2.禁用响应式

如果你不喜欢响应式？可以尝试禁用，方法如下：

• 删除 head 里的视口设置 meta 标签；
  

<!--<meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->

• 固定容器 .am-container 宽度（可以自己添加一个 class，不一定要使用内置的）：
  

.am-container {
  width: 980px !important;
  max-width: none;
}

• 使用网格系统时，只添加 .am-u-sm-* class，移除其他断点的 class。
  

完成上面这几个步骤，布局层的响应式便被禁用了。