Amaze UI 布局示例.pdfVIP

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博客侧栏页⾯ 使⽤组件说明： CSS 部分：⽹格 ⽂章页 评论列表 按钮 图标 列表 辅助类 JS 插件部分：侧边栏组件 1.5管理后台模板 index 页⾯ user 页⾯ gallery 页⾯ table 页⾯ form 页⾯ help 页⾯ log 页⾯ 404 页⾯ 2.禁⽤响应式 如果你不喜欢响应式？可以尝试禁⽤，⽅法如下： 删除 head ⾥的视⼜设置 meta 标签； !--meta name=viewport content=width=device-width, initial-scale=1. , minimum-scale 固定容器 .am container 宽度 （可以⾃⼰添加⼀个 class ，不⼀定要使⽤内置 的）： .am-container { width: 98 px !important; max-width: none; } 使⽤⽹格系统时，只添加 .am u sm * class ，移除其他断点的 class 。 完成上⾯这⼏个步骤，布局层的响应式便被禁⽤了。 W3Cschool （ ）最⼤的 术知识分享与学习平台 此篇内容来⾃于 ⽹站⽤户上传并发布。