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 组件更新历史 ...
随机推荐
- Linux 终端仿真程序Putty
PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件.较早的版本仅支持Windows平台,现在的版本中开始支持各类Unix平台. 用linux作为桌面系统,身为工程师很多时 ...
- OpenJDK源码研究笔记(十五):吐槽JDK中的10个富有争议的设计
前14篇文章,分享了JDK中值得学习和借鉴的编码和设计方法. 每个硬币都是有两面的.Every coin has two sides. 当然,JDK中也有很多值得改进或者说富有争议的设计. 本篇,就来 ...
- 【Henu ACM Round#17 B】USB Flash Drives
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 排序,逆序.贪心选较大的就好. [代码] #include <bits/stdc++.h> #define ll lon ...
- Android插件化(二):使用DexClassLoader动态载入assets中的apk
Android插件化(二):使用DexClassLoader动态载入assets中的apk 简单介绍 上一篇博客讲到.我们能够使用MultiDex.java载入离线的apk文件.须要注意的是,apk中 ...
- HDOJ 4460 Friend Chains 图的最长路
类似于树的直径,从随意一个点出发,找到距离该点最远的且度数最少的点. 然后再做一次最短路 Friend Chains Time Limit: 2000/1000 MS (Java/Others) ...
- C语言的有符号与无符号,二进制整数的扩展与截断
C语言的有符号与无符号,二进制整数的扩展与截断 前一节说了整数的表示方式,,也就是无符号编码与补码编码.这一届说一下二进制整数的扩展与截断,这部分内容与C语言挂钩.so,我们先看下面C语言的有符号和无 ...
- Springboot优化
https://www.cnblogs.com/chen110xi/p/6198481.html
- 56.如何清除已经设置的npm config配置
npm config delete registry npm config delete disturl 或者 npm config edit 找到淘宝那两行,删除
- 秀秀SolarWinds为网络工程师准备的工具
SolarWinds Engineer's Toolset部分功能截图 650) this.width=650;" onclick='window.open("http://blo ...
- Android WebView页面加载优化
目前webapp越来越多,体验也越来越好,为了能够更好的使用WebView展示出流畅的的页面,可以从以下几点做优化: WebView缓存 资源文件本地存储 减少耗时操作 客户端UI优化 可能有人会说了 ...