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 组件更新历史 ...
随机推荐
- Beautiful Soup的使用
Beautiful Soup简单实用,功能也算比较全,之前下载都是自己使用xpath去获取信息,以后简单的解析可以用这个,方便省事. Beautiful Soup 是用 Python 写的一个 HTM ...
- 【Codeforces Round #460 (Div. 2) D】Substring
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果有环 ->直接输出-1 (拓扑排序如果存在某个点没有入过队列,说明有环->即入队的节点个数不等于n 否则. 说明可以 ...
- 洛谷 P1732 [TJOI2011]序列
P1732 [TJOI2011]序列 题目描述 一指数列A={a1, a2, …, an},根据数列A计算数列B={b1, b2, …, bn},其中: 求\sum\limits^n_{i=1} b_ ...
- IOS基础学习日志(七)利用dispatch_once创建单例及使用
自苹果引入了Grand Central Dispatch (GCD)(Mac OS 10.6和iOS4.0)后,创建单例又有了新的方法,那就是使用dispatch_once函数,当然,随着演进的进行. ...
- POJ 3042 区间DP(费用提前计算相关的DP)
题意: 思路: f[i][j][1]表示从i到j的区间全都吃完了 现在在j点 变质期最小是多少 f[i][j][0]表示从i到j的区间全都吃完了 现在在i点 变质期最小是多少 f[i][j][0]=m ...
- Java的IO流架构
输入输出是指应用程序与外部设备及其他计算机进行数据交流的操作,如读写硬盘数据.向显示器输出数据.通过网络读取其他节点的数据等.任何一种编程语言必须拥有输入输出的处理方式,Java语言也不例外.Java ...
- vue 实例的生命周期
Vue把整个生命周期划分为创建.挂载.更新.销毁等阶段,每个阶段都会给一些"钩子"让我们来做一些我们想实现的动作. 分为以下几个阶段 1.beforeCreate 此阶段为 ...
- SASS常用方法
cnpm install --save-dev sass-loader //sass-loader依赖于node-sass cnpm install --save-dev node-sass //实现 ...
- 我的第一个Django项目
1.创建Django项目 命令:django-admin startproject 项目名 注意:创建应用必须先进入虚拟环境. 项目目录如下: 目录层级说明: __init__.py: 说明demo0 ...
- 关于Blocking IO,non-Blokcing IO,async IO的区别和理解
来源:http://shmilyaw-hotmail-com.iteye.com/blog/1896683 概括来说,一个IO操作可以分为两个部分:发出请求.结果完成.如果从发出请求到结果返回,一直B ...