文档章节

AmazeUI布局

开源中国小卖部店员
 开源中国小卖部店员
发布于 2016/10/26 15:06
字数 1029
阅读 54
收藏 0

  AmazeUI使用了12列的响应式网络系统。使用时需在外围容器上添加.am-g class,在列上添加.am-u-[sm|md|lg]-[1-12] class,然后根据不同的屏幕需求设置不同的宽度。  

 am-u-sm-*  0-640px     am-u-md-*  641px-1024px  am-u-lg-* 1025px+

 AmazeUI以移动优先的理念开发,若不设置大屏的网络,应用到小屏幕的样式会继承到更大的屏幕上。

 am-g:网格的行,用于包裹列,清楚列的浮动

 am-u-xx-n:网格中的列,xx为视口区间,n为该列所占的份数

 sm区间两列是等分的,md区间为1:2划分,lg区间为1:3划分

 .am-g的宽度别设置为100%,为限定最大宽度,会随着窗口自动缩放。可以在行内添加,am-g-fixed class,将最大宽度(max-width)限制为1000px。

 全宽的行 .am-container。am-container和网格列设置了相同的左右padding,可以和网格内容对齐。

 网格拆分时使用了非证书百分比(100/12*n),浏览器在计算的时候会有差异,最终所有列的宽度可能没有达到100%,导致网格右侧会有很小的空隙。实际使用中,若网格数不足12,需要在最后一列加上.am-u-end。

 

 

  响应式布局

 响应式辅助类控制元素显隐 am-show-md-down  am-hide-md-down

 边距离 am-u-sm-offset-1(1-10)

 列居中 am-u-xx-centered  如 am-u-sm-centered  

 列不居中 am-u-xx-uncentered  如  am-u-sm-uncentered

 列排序:处于SEO考虑,有时会有一些结构和表现不一致的情况,可以通过am-u-xx-push-*/am-u-xx-pull-*来实现。

 移出行内边距 am-g-collapse

 

  

  AVG-Grid(均分网格) 使用ul/ol创建等分列,用于内容的排列。只能用于<ul><ol>结构。

 am-avg-sm-*  0-640px  

 am-avg-md-*  641px-1024px

 am-avg-lg-*    1024px+ 

  *表示几等分,而不是占12列中的几列。

 只添加.am-avg-sm-*应用于所有屏幕尺寸。

 <ul class="am-avg-sm-4 am-thumbnails">

  <li><img class="am-thumbnail" src="" /></li>

 </ul>

  九宫格

 <ul class="am-avg-sm-3 boxes">

   <li class="box box-1">1</li>

    ...

   <li class="box box-9">9</li>

 </ul>

 

 

  水平滚动 am-scrollable-horizontal 

  垂直滚动 am-scrollable-vertical

  清除浮动 am-cf 

  创建新的BFC清除浮动  am-nbfc

  左浮动 am-fl

  右浮动 am-fr

  水平居中 am-center

  垂直对齐原理是把父容器内的“幽灵”元素的高度设置为100%,再通过设置需要对齐的元素vertical-align属性实现。

  am-vertical-align  将这个class添加到父容器中,父容器需要指定高度

  am-vertical-align-middle  需要垂直居中的元素

  am-vertical-align-bottom  添加到需要底部对齐的元素

  am-block  display设置为block

  am-inline  display设置为block

  am-inline-block display设置为inline-block 

  am-hide 隐藏元素

  尺寸 xs:5px  sm:10px  default:16px  lg:24px  xl:32px  

  文本颜色  am-text-xx(primary;secondary,success,warning,danger)

  链接颜色默认为蓝色,使用am-link-muted可以将链接颜色设置为灰色

  文字大小 am-test-xs:12px am-text-sm:14px am-text-default:16px am-text-lg:18px am-text-xl:24px  am-text-xxl:32px am-text-xxxl:42px

  文本对齐 am-text-left(左对齐) am-text-right(右对齐) am-text-center(居中) am-text-justify(自适应)

  文本垂直对齐 am-text-top顶对齐   am-text-middle居中对齐   am-text-bottom底对齐

  am-text-truncate 禁止换行,超出容器部分阶段。以...结束

  am-text-break 超出文字容器宽度时强制换行,主要用于英文排版

  am-text-nowrap 禁止换行,不截断超出容器宽度部分

  Webkit内核的浏览器可以通过-webkit-line-clamp私有属性实现多行文字截取。其他浏览器没有这个属性,通常做法是把容器的高度限定为行高*显示的行数,超出的部分隐藏。

  .line-clamp {
    overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
    -webkit-line-clamp: 2; // 这里修改为要显示的行数
    -webkit-box-orient: vertical;
  }

  

  CSS Image Replacement,图片替换计算兼顾显示效果、可仿性、SEO。使用am-text-ir class结合背景图片实现图片替换

  使用float实现类似html的align属性的效果,父容器要清楚浮动。与.am-fl、am-fr相比,浮动的元素添加了margin。am-align-right am-align-left

  调整浏览器窗口大小查看元素的显隐 am-[show|hide]-[sm|md|lg][-up|-down|-only]

  am-show-sm-only 只在sm区间显示

  am-show-sm-up  大于sm区间时显示

  am-show-md-down 小于sm区间时显示

  am-show-sm 在sm区间显示

  横屏 am-show-landscape  am-hide-landscape

  竖屏 am-show-portrait  am-hide-portrait

本文转载自:

上一篇: AmazeUI基本样式
下一篇: 卖火柴的小女孩
开源中国小卖部店员
粉丝 18
博文 52
码字总数 15073
作品 0
苏州
后端工程师
私信 提问
开发时间缩短90% Amaze UI助H5梦工场响应式网站快速上线

近日,HTML5梦工场使用云适配开源HTML5跨屏前端框架Amaze UI对自身网站进行了重新开发。开发完成的新网站,用户无论通过任何终端访问,网站内容都能保持实时同步,并能以最佳的展现方式呈现出...

云适配
2016/05/17
3
0
bingoJS 2.x | AmazeUI 后台 SPA 管理框架

AmazeUI - admin 基于AmazeUI - admin 模板。 bingoJS 2.x 使用bingoJS 2.x 前端MV开始。 demo 在线demo PS:基于 AmazeUI(amdin) + bingoJS 2.x 实现模块化单页面(SPA)快速开发后台管理框架...

front-Y
2016/08/01
1K
0
中国首个开源HTML5 跨屏前端框架Amaze UI

云适配,这是一家能以一行代码将你的网站移动化,实现网址不变且内容实时自动同步的服务提供商。云适配所采用的技术是一项基于云计算、利用html5进行网站跨屏适配,它为目标网站开发一行JS代...

panpanhtai
2014/06/26
19
0
Amaze UI——可能是最好用的 HTML5 前端框架

Amaze UI 是一个针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框架,通过拆分、封装了一些常用的网页组件,比如轮播图框、文字框等等组件,让前端开发者只用复制代码便可以将这些跨...

oschina
2014/09/17
40K
39
Amaze UI 定制化工具上线丨打造专属于你的“妹子UI”

“你们的离线包太大了,能不能精简一下,或者提供在线定制?” “能不能改改颜色!!能不能!!!” “你说说你们,提供那么多我用不到的插件干啥?” 收到,收到!你们的意见,我们一直在聆...

云适配
2016/11/10
850
4

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot Actuator监控应用

微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现异常如何快速定位便成...

zw965
22分钟前
4
0
高性能最终一致性框架Ray之基本概念原理

一、Actor介绍 Actor是一种并发模型,是共享内存并发模型的替代方案。 共享内存模型的缺点: 共享内存模型使用各种各样的锁来解决状态竞争问题,性能低下且让编码变得复杂和容易出错。 共享内...

程序员修BUG
22分钟前
4
0
如何去掉子集合功能中的按钮?

解决方案: 1、找到子集合字段 2、打开字段详细信息,在辅助配置里面进行配置 加入JEPaaS技术交流群,了解更多

JEPaaS云平台
24分钟前
5
0
创龙TI KeyStone C66x多核定点/浮点DSP TMS320C665x + Xilinx Artix-7 FPGA处理器;

广州创龙结合TI KeyStone系列多核架构TMS320C665x及Xilinx Artix-7系列FPGA设计的TL665xF-EasyEVM开发板是一款DSP+FPGA高速大数据采集处理平台,其底板采用沉金无铅工艺的6层板设计,适用于高...

Tronlong创龙
26分钟前
5
0
hbuilder打包常用android权限配置

常用android权限配置 - 开启相机权限 - 允许程序通过WiFi或移动基站的方式获取用户错略的经纬度信息 - 允许程序通过GPS芯片接收卫星的定位信息 - 允许程序获取模拟定位信息,一般用于帮助开发...

小草先森
27分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部