amazeui学习笔记一（开始使用2）–布局示例layouts

 一、总结

1、样例分析（不要忘记，优先分析这个布局示例）：有教你页面怎么布局的，实例中可以分析一波

2、响应式：对应meta标签中的viewpoint属性：

3、禁用响应式方法：（就是amaze ui应该是默认响应式的）

  • a、删除 head 里的视口设置 meta 标签；
  • b、固定容器 .am-container 宽度（可以自己添加一个 class，不一定要使用内置的）：
  • c、使用网格系统时，只添加 .am-u-sm-* class，移除其他断点的 class。

4、 自己设置css，其实amazeui里面也是这么设置的

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

 

 

二、布局示例layouts

布局示例

目录

Amaze UI 目前提供几个常见的布局示例，供开发者参考，后续会增加更多示例。

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

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

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

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

示例说明

landingPage展示页面
loginPage登录注册页面
blogPage博客页面
sidebarPage侧边栏页面
adminPage管理后台模板

展示页面

使用组件说明：

登录页面

使用组件说明：

博客页面

使用组件说明：

博客侧栏页面

使用组件说明：

管理后台模板

禁用响应式

不喜欢响应式？可以尝试禁用：

  • 删除 head 里的视口设置 meta 标签；
 Copy
<!--<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，不一定要使用内置的）：
 Copy
.am-container {
  width: 980px !important;
  max-width: none;
}
  • 使用网格系统时，只添加 .am-u-sm-* class，移除其他断点的 class。

至此，布局层的响应式被禁用了（参考示例）。

 

版权声明：本文为Renyi-Fan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Renyi-Fan/p/9001273.html