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 ...
随机推荐
- sicily 1004. 简单哈希
Description 使用线性探测法(Linear Probing)可以解决哈希中的冲突问题,其基本思想是:设哈希函数为h(key) = d, 并且假定哈希的存储结构是循环数组, 则当冲突发生时, ...
- Eclipse输入智能提示设置
JAVA智能提示 展开菜单 Window -> preferences -> Java -> Editor -> Content assist 找到右边的Auto-Activa ...
- pyton写购物车
pyton写购物车 基本要求: 用户输入工资,然后打印购物菜单用户可以不断的购买商品,直到余额不够为止退出时打印用户已购买的商品和剩余金额.. 1.这个程序功能不完整,bug很多,练手之作. good ...
- Visual Studio添加lib到链接依赖项的几种方法
使用第三方库文件编写应用时经常会出现链接错误: 错误 22 error LNK2019: 无法解析的外部符号..... 该符号在函数.....在....中被引用 出现这个错误的原因很简单,链接器在將库 ...
- ES6中includes、startsWith、endsWith
es6新增includes:返回布尔值,表示是否找到字符串.startsWith:返回布尔值,表示字符串是否在源字符串的头部位置.endsWith:返回布尔值,表示参数字符串是否在源字符串尾部. va ...
- jQuery的效果函数
jQuery的效果函数有很多,下面让我们一起看看jQuery的效果函数吧: jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除 ...
- NodeJS学习笔记 (15)二进制数据-buffer(ok)
模块概览 Buffer是node的核心模块,开发者可以利用它来处理二进制数据,比如文件流的读写.网络请求数据的处理等. Buffer的API非常多,本文仅挑选 比较常用/容易理解 的API进行讲解,包 ...
- js循环匹配组合成新对象或js循环组合新数据
var Arry=[ {name: "vehicleTravelLicenseCopyBack", id: "a1"}, {name: "vehicl ...
- Linux Shell脚本编程-基础2
命令退出状态码 bash每个命令,执行状态都有返回值 0表示成功 非0表示失败(1-255) $?特殊变量可以打印出上一条命令的状态返回值 脚本的状态返回值是脚本执行的最后一条命令 自定义脚本状态返 ...
- mpstat---用于多CPU环境下,显示各个可用CPU的状态
mpstat命令指令主要用于多CPU环境下,它显示各个可用CPU的状态系你想.这些信息存放在/proc/stat文件中.在多CPUs系统里,其不但能查看所有CPU的平均状况信息,而且能够查看特定CPU ...