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

最新推荐文章于 2025-05-20 15:01:15 发布

weixin_33829657

最新推荐文章于 2025-05-20 15:01:15 发布

阅读量350

点赞数

文章标签： ui 运维 python

本文介绍AmazeUI的布局示例及其使用方法，包括禁用响应式设计的步骤。涵盖不同页面类型的布局技巧，如登录页、博客页及管理后台等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

布局示例

示例说明

展示页面

使用组件说明：

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

登录页面

使用组件说明：

CSS 部分：网格图标按钮按钮组表单

博客页面

使用组件说明：

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

博客侧栏页面

使用组件说明：

CSS 部分：网格文章页评论列表按钮图标列表辅助类
JS 插件部分：侧边栏组件

管理后台模板

禁用响应式

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

删除 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。

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

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

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

一、总结

二、布局示例layouts

布局示例

目录

示例说明

展示页面

登录页面

博客页面

博客侧栏页面

管理后台模板

禁用响应式