amaze ui使用简介
amaze ui使用简介
amaze UI
类似于bootstrap
不过比bootstrap更加轻量级
可以用来开发响应式网站,并且是移动优先的,针对移动设备开发的网站可以考虑使用这个框架
css中的网格
首先要对框架的命名规则有所了解
然后自己在使用框架开发的过程中也根据框架的命名规则来给自己的代码命名
.am-g表示行
.am-u-sm-n表示列
比如am-u-sm/md/lg-n
这个类中 am是amaze的意思 u是unite的意思 可以理解成网格
sm代表small是手机屏幕
md是Middle 代表平板等的屏幕
lg是pc的屏幕 large的意思
n代表比例
n/12 整个屏幕被分成12份儿
-webkit是适用于safari或者chrome的
-moz是firfox的浏览器
通过网格系统可以做到
屏幕变小或者变大的时候
1.隐藏某一行
2.换列的比例
3.调整成两行
4.不变
等等
我在使用框架或者插件的时候遇到的一些问题:
1.JS在引用的时候应该注意引用的顺序,顺序不合适可能导致错误
比如 Jquery一般应该在别的js文件之前
因为别的js文件可能引用了JQ
2.注意选择器的优先级
3.IE浏览器debug注意下兼容模式与否,IE8,IE9,IE10,IE11
参考:
第一次使用框架-amaze UI - CSDN博客
https://blog.csdn.net/yoany/article/details/46907415
amaze ui使用简介的更多相关文章
- DoNet开源项目-基于Amaze UI的点餐系统
帮朋友做的点餐系统,主要是为了让顾客在餐桌上,使用微信扫描二维码,就可以直接点菜,吃完使用微信付款. 系统演示地址,账户名和密码均为:admin.(请不要删除admin用户) GitHub Clone ...
- 幻灯片插件FlexSlider -- Amaze UI幻灯片参数
用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...
- 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI
Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...
- 有了bootstrap,为什么还要做amaze ui
1.Bootstrap介绍Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...
- 移动端 前端框架 amaze ui
移动端 前端框架 amaze ui http://amazeui.org/?_ver=2.x
- Amaze UI 是一个移动优先的跨屏前端框架。 http://amazeui.org/
http://amazeui.org/ Amaze UI 是一个移动优先的跨屏前端框架.... Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适 ...
- 十、VueJs 填坑日记之在项目中使用Amaze UI
上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主 ...
- 十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面
上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题.今天我们来重新调整一下列表页面和内容页面,使我们做的后台 ...
- amaze UI 笔记 - CSS
导航添加依据 http://amazeui.org/css/ 下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1.统一样式 说明了为什么使用Nor ...
随机推荐
- HTML 表格 做个人简历
根据老师上课讲的常用标签与表格的应用 终于做出了第一个网页版的个人简历 虽然作出来了 但是感觉其中方法有点儿问题 还需要进一步的改进中…… <!DOCTYPE html PUBLIC " ...
- Chromium Graphics: Aura
Aura (obsolete) This document is still good for a high level overview, with contact information, but ...
- 在windows下如何新建爬虫虚拟环境和进行scrapy安装
Scrapy是Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy吸引人的地方在于它是一个框架,任何人都可以根据需求方便的修改.Sc ...
- mybatis-generator-core快速生成实体类和Mapper
日常使用Mybatis少不了和实体类和 Mapper 打交道.除了我们手写来实现,还可以使用 mybatis-generator-core 来快速生成 实体类和 Mapper. 步骤如下: 1.下载 ...
- bzoj1612 Usaco08 Jan 牛大赛
水题模拟 建一个图,每两个牛进行比赛就连一条边,然后两遍dfs求出比他弱和比他强的牛,最后如果相加数量等于n,说明他能与全部的牛进行比较,排名确定. #include<bits/stdc++.h ...
- PHP实时生成并下载超大数据量的EXCEL文件
最近接到一个需求,通过选择的时间段导出对应的用户访问日志到excel中, 由于用户量较大,经常会有导出50万加数据的情况.而常用的PHPexcel包需要把所有数据拿到后才能生成excel, 在面对生成 ...
- CRC校验原理及步骤
什么是CRC校验? CRC即循环冗余校验码:是数据通信领域中最常用的一种查错校验码,其特征是信息字段和校验字段的长度可以任意选定.循环冗余检查(CRC)是一种数据传输检错功能,对数据进行多项式计算,并 ...
- HBase为什么快 HBase原理。 HBase几个问题
背景色表示可以自己做实验搞定 1 模拟一组数据 1.2.3.4.5.6.7.8.9.10 1 入 限定符 'one' 2 入 'two' 3 入 'three' 4 f ...
- BNU 34974 MATLAB大法好
题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=34974 MATLAB大法好 Time Limit: 8000ms Memory Limi ...
- POJ 1152 An Easy Problem! (取模运算性质)
题目链接:POJ 1152 An Easy Problem! 题意:求一个N进制的数R.保证R能被(N-1)整除时最小的N. 第一反应是暴力.N的大小0到62.发现当中将N进制话成10进制时,数据会溢 ...