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 服务器。

示例说明

展示页面

使用组件说明:

登录页面

使用组件说明:

博客页面

使用组件说明:

博客侧栏页面

使用组件说明:

管理后台模板

禁用响应式

不喜欢响应式?可以尝试禁用:

  • 删除 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的更多相关文章

  1. amazeui学习笔记--css(布局相关1)--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  2. amazeui学习笔记--css(布局相关3)--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  3. amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  4. amazeui学习笔记一(开始使用3)--兼容性列表compatibility

    amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...

  5. amazeui学习笔记一(开始使用1)--主干

    amazeui学习笔记一(开始使用1)--主干 一.总结 1.英语:学好英语,编程轻松很多 2. layouts compatibility change log web app collection ...

  6. amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  7. amazeui学习笔记--css(常用组件16)--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  8. amazeui学习笔记三(你来我往1)--常见问题FAQs

    amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...

  9. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

随机推荐

  1. 【Uva 1601】The Morning after Halloween

    [Link]: [Description] 给你一张平面图; 最多可能有3只鬼; 给出这几只鬼的初始位置; 然后,这几只鬼有各自的终点; 每秒钟,这几只鬼能同时移动到相邻的4个格子中的一个 任意两只鬼 ...

  2. struts2的acton标签中的ignoreContextParams属性和param子元素的冲突

    <s:action ignoreContextParams="true" executeResult="true" name="login&qu ...

  3. 【Linux环境编程】获取网卡的实时网速

    在windows以下.我们能够看到360或者是qq安全卫士的"安全球".上面显示实时的网速情况.那么在linux里面怎样获取网卡的实时网速?事实上原理非常easy,读取须要获取网速 ...

  4. QTP校验数据库中数据后台项目

    数据校验功能后台主要包含两个类:QTPCommonServlet.java和QTPCommonDao.java 当中QTPCommonServlet.java为: package com.runqia ...

  5. SQL Server 为代码减负之存储过程

        存储过程能够用来提高数据库的查询效率.由于它事先被编译过.被储存于内存中,每次执行前.不必被从新编译,所以效率非常高. 存储过程是一组sql增删改查的集合,假设程序中的一个功能涉及到对数据库的 ...

  6. 详解Android插件化开发-资源访问

    动态加载技术(也叫插件化技术),当项目越来越庞大的时候,我们通过插件化开发不仅可以减轻应用的内存和CPU占用,还可以实现热插拔,即在不发布新版本的情况下更新某些模块.     通常我们把安卓资源文件制 ...

  7. Onvif开发之服务端发现篇

    服务端的开发相对来说比客户端稍微难一点,也就是给填充相关结构体的时候,需要一点一点的去查阅,验证各个结构中各个成员各自代表什么意思,以及对应的功能需要是那个接口实现,这是开发服务端最头疼的事情.(在开 ...

  8. Js将类数组转化为数组

    说起伪数组,大家可能会想到arguments, 这个我们函数参数的一个类数组,是类数组的代表. 1.拥有length属性,可以使用下标来访问元素,这两点和数组相同. 2.不能使用数组的方法,他们不能使 ...

  9. 玲珑学院 1050 - array

    1050 - array Time Limit:3s Memory Limit:64MByte Submissions:494Solved:155 DESCRIPTION 2 array is an ...

  10. win7禁用启用本地连接bat及vbs

    平台:Windows 7 .8.1 目的:用bat启用禁用网卡 操作: cls @ECHO OFFtitle 启用或禁用本地连接 CLS color 0a GOTO MENU:MENU ECHO. E ...