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  代表平板等的屏幕

lgpc的屏幕 large的意思

n代表比例

n/12   整个屏幕被分成12份儿

-webkit是适用于safari或者chrome

-mozfirfox的浏览器

通过网格系统可以做到

屏幕变小或者变大的时候

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使用简介的更多相关文章

  1. DoNet开源项目-基于Amaze UI的点餐系统

    帮朋友做的点餐系统,主要是为了让顾客在餐桌上,使用微信扫描二维码,就可以直接点菜,吃完使用微信付款. 系统演示地址,账户名和密码均为:admin.(请不要删除admin用户) GitHub Clone ...

  2. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

  3. 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  4. 有了bootstrap,为什么还要做amaze ui

    1.Bootstrap介绍Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  5. 移动端 前端框架 amaze ui

    移动端 前端框架 amaze ui http://amazeui.org/?_ver=2.x

  6. Amaze UI 是一个移动优先的跨屏前端框架。 http://amazeui.org/

    http://amazeui.org/ Amaze UI 是一个移动优先的跨屏前端框架.... Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适 ...

  7. 十、VueJs 填坑日记之在项目中使用Amaze UI

    上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主 ...

  8. 十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

    上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题.今天我们来重新调整一下列表页面和内容页面,使我们做的后台 ...

  9. amaze UI 笔记 - CSS

    导航添加依据 http://amazeui.org/css/  下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1.统一样式 说明了为什么使用Nor ...

随机推荐

  1. 关于ListView的一些不常用到的属性

    1.setCacheColorHint自定义listview的时候,当你不使用Android:cacheColorHint=“#00000000”会出现下面选中一个空间黑色底色的情况,破坏整体美观度 ...

  2. mysql读写分离的解决方案

    来源于网上整理 http://yanwt.iteye.com/blog/1460780 现有三种解决方式实现mysql读写分离 1 程序修改mysql操作类 优点:直接和数据库通信,简单快捷的读写分离 ...

  3. hdu 1022 - 数据结构 栈

    题目链接 按序列a进栈,问能不能按序列b出栈. 遍历b,如果当前元素进过栈了,那么必须和栈顶元素相同.如果没进过栈则按a序列压栈,直到遇到当前元素. #include <iostream> ...

  4. HDU 4324 Triangle LOVE【拓扑排序】

    题意:给出n个人,如果a喜欢b,那么b一定不喜欢a,如果b不喜欢a,那么a一定喜欢b 就是这n个点里面的任意两点都存在一条单向的边, 所以如果这n个点不能构成拓扑序列的话,就一定成环了,成环的话就一定 ...

  5. WLAN HAL

      WLAN HAL WLAN 框架具有三个 WLAN HAL 表面,分别由三个不同的 HIDL 软件包表示: 供应商 HAL:Android 专用命令的 HAL 表面.HIDL 文件位于 hardw ...

  6. NodeJS学习笔记 进阶 (5)将图片转成datauri嵌入到html(ok)

    个人总结:这篇文章讲解了使用Node处理转换base64编码图片,读完这篇文章需要5分钟. 摘选自网络 问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:“nodejs读取图片,转成b ...

  7. JAVA版本区块链钱包核心代码

    Block.java package com.ppblock.blockchain.core; import java.io.Serializable; /** * 区块 * @author yang ...

  8. echarts 绑定事件重复执行问题。

    网上所有,先调用.off 方法后再调用.on 绑定事件. 无效果,查看api未发现off方法,于是采用,先删除原先元素,后重新生成的方式. 场景描述. 用户查询时,每次结果都对应一张饼图.该张饼图绑定 ...

  9. 帆软FineBI试用

    FineBI是帆软软件有限公司推出的一款商业智能(Business Intelligence)产品,FineBI的本质是通过分析企业已有的信息化数据,帮助企业发现并解决存在的问题,预测模拟企业将来的发 ...

  10. 洛谷 P1769 淘汰赛制_NOI导刊2010提高(01)

    P1769 淘汰赛制_NOI导刊2010提高(01) 题目描述 淘汰赛制是一种极其残酷的比赛制度.2n名选手分别标号1,2,3,…,2^n-1,2^n,他们将要参加n轮的激烈角逐.每一轮中,将所有参加 ...