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. Linux 终端仿真程序Putty

    PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件.较早的版本仅支持Windows平台,现在的版本中开始支持各类Unix平台. 用linux作为桌面系统,身为工程师很多时 ...

  2. OpenJDK源码研究笔记(十五):吐槽JDK中的10个富有争议的设计

    前14篇文章,分享了JDK中值得学习和借鉴的编码和设计方法. 每个硬币都是有两面的.Every coin has two sides. 当然,JDK中也有很多值得改进或者说富有争议的设计. 本篇,就来 ...

  3. 【Henu ACM Round#17 B】USB Flash Drives

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 排序,逆序.贪心选较大的就好. [代码] #include <bits/stdc++.h> #define ll lon ...

  4. Android插件化(二):使用DexClassLoader动态载入assets中的apk

    Android插件化(二):使用DexClassLoader动态载入assets中的apk 简单介绍 上一篇博客讲到.我们能够使用MultiDex.java载入离线的apk文件.须要注意的是,apk中 ...

  5. HDOJ 4460 Friend Chains 图的最长路

    类似于树的直径,从随意一个点出发,找到距离该点最远的且度数最少的点. 然后再做一次最短路 Friend Chains Time Limit: 2000/1000 MS (Java/Others)    ...

  6. C语言的有符号与无符号,二进制整数的扩展与截断

    C语言的有符号与无符号,二进制整数的扩展与截断 前一节说了整数的表示方式,,也就是无符号编码与补码编码.这一届说一下二进制整数的扩展与截断,这部分内容与C语言挂钩.so,我们先看下面C语言的有符号和无 ...

  7. Springboot优化

    https://www.cnblogs.com/chen110xi/p/6198481.html

  8. 56.如何清除已经设置的npm config配置

    npm config delete registry npm config delete disturl 或者 npm config edit 找到淘宝那两行,删除

  9. 秀秀SolarWinds为网络工程师准备的工具

    SolarWinds Engineer's Toolset部分功能截图 650) this.width=650;" onclick='window.open("http://blo ...

  10. Android WebView页面加载优化

    目前webapp越来越多,体验也越来越好,为了能够更好的使用WebView展示出流畅的的页面,可以从以下几点做优化: WebView缓存 资源文件本地存储 减少耗时操作 客户端UI优化 可能有人会说了 ...