amazeui学习笔记一(开始使用2)--布局示例layouts
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
标签;
<!--<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,不一定要使用内置的):
.am-container {
width: 980px !important;
max-width: none;
}
- 使用网格系统时,只添加
.am-u-sm-*
class,移除其他断点的 class。
至此,布局层的响应式被禁用了(参考示例)。
amazeui学习笔记一(开始使用2)--布局示例layouts的更多相关文章
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
- amazeui学习笔记一(开始使用3)--兼容性列表compatibility
amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...
- amazeui学习笔记一(开始使用1)--主干
amazeui学习笔记一(开始使用1)--主干 一.总结 1.英语:学好英语,编程轻松很多 2. layouts compatibility change log web app collection ...
- amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记三(你来我往1)--常见问题FAQs
amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
随机推荐
- How Hystrix Works?--官方
https://github.com/Netflix/Hystrix/wiki/How-it-Works Contents Flow Chart Circuit Breaker Isolation T ...
- xfce4 + docky ,docky 上面那透明的一条黑色横线去掉方法
在安装完Debian 9 + xfce4桌面后 ,添加docky启动后,会在docky 上面有一条黑色横线看起来非常不舒服. 去掉方法:设置管理器->窗口管理器微调->合成器->取消 ...
- 【Linux下安装使用virtualenv与virtualenvwrapper】
virtualenv virtualenv是一个可以帮助我们管理不同Python环境的绝好工具. virtualenv是一个可以在系统中建立多个不同且相互不干扰的虚拟环境. 下面的步骤将创建两个独立的 ...
- Scrapy发送POST请求
一.发送post请求需要将start_urls注释,然后重写start_requests方法二.使用yield scrapy.FormRequest(url=post_url, formdata=fo ...
- Swift学习笔记(5)--数组
数组的下标从0开始计数,相关方法属性涉及到下标时也从0开始计数 1.定义: //1.可变数组 var cityArray = ["Portland","San Franc ...
- XML解析——SAX解析以及更方便的解析工具(JDOM、DOM4J)
XML主要用于数据交换,HTML则用于显示. 相对于DOM的树形解析,SAX采用的是顺序解析,这种解析方法可以快速地读取XML数据的方式. SAX主要事件: No. 方法 类型 描述 1 public ...
- RQNOJ PID496/[IOI1999]花店橱窗布置
PID496 / [IOI1999]花店橱窗布置 ☆ 题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序 编号 ...
- AES加密解密&&SHA1、SHA加密&&MD5加密
AES加密解密 SHA1.SHA加密 MD5加密 二话不说立即附上代码: package com.luo.util; import java.io.UnsupportedEncodingExcepti ...
- 图解hdu5301Buildings
这个题就是给出一个大矩形n*m.当中有个1*1的小格子不能被占用,然后要你用非常多小矩形去填满.问小矩形的最小最大面积是多少. 显然小矩形必定是1*x的最好,毕竟i*x,若i>1则还是能够拆成非 ...
- vim 解决tags递归查询问题
今天在vim下配置了两个插件,分别是exuberant-ctags 跟cscope.这两个插件主要是用来实现类.方法查询跟跳转.至于它们如何安装跟使用,网上教程一大堆,我也是按着别的大神教程一步步来的 ...