什么是自适应布局

CabloyJS提供了一套布局管理器，实现自适应布局

关于自适应布局的概念，强烈建议先阅读以下两篇文章：

  1. 自适应布局：pc = mobile + pad

  2. 自适应布局：视图尺寸

什么是PC布局

CabloyJS内置了一套Mobile布局和PC布局。其中，PC布局提供了更丰富的布局元素和交互体验。

PC布局是由模块a-layoutpc实现的，如果对底层的实现机制感兴趣，可以直接查看模块a-layoutpc的源码，这里重点说明PC布局的风格，以及如何定制，如何进行二次开发

演示

1. 头部按钮

2. 左边栏

3. 右边栏

4. 状态栏（左）

5. 状态栏（右）

高度灵活可定制的PC布局：头部按钮、左边栏、右边栏、状态栏的更多相关文章

  1. css布局 - 工作中常见的两栏布局案例及分析

    突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...

  2. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  3. easyui div 上下布局 最大化按钮 隐藏标题

    背景:easyui在做上下布局的时候,上面是数据列表,下面是数据图表.如下图 需要在上下面板右上角加上最大化按钮,以便可以全屏显示.逻辑就是当上面点击最大化时候,隐藏下面,主意:此时需要将下面的div ...

  4. HTML布局之左右结构，左边固定右边跟据父元素自适应

    HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...

  5. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  6. 稳定灵活的 HTML 列式布局

    主要特点: 所有列轻松实现相同高度 兼容性极高 ------------------------------------------------ 代码 ------------------------ ...

  7. Android 定制下拉刷新头部 Ultra Pull To Refresh

    我们看到手机中的各种APP的花样繁多的下拉刷新是不是有点心动呢,想着自己定制自己的专门的下拉刷新,市场上比如,58同城,京东,天猫,美团等下拉刷新都是在下拉头部执行帧动画,我最近看到一个APP,就是慕 ...

  8. CSS未知div高度垂直居中代码_层和布局特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【表单验证】基于jQuery的高度灵活的表单验证（无UI）

    表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...

随机推荐

  1. vscode代码格式化快捷键及保存时自动格式化

    一.实现vs code中代码格式化快捷键:[Shift]+[Alt]+ F 二.实现保存时自动代码格式化: 1)文件 ------.>[首选项]---------->[设置]: 2)搜索  ...

  2. 使用pyinstaller库打包文件

    1.pyinstaller的安装 先win+r打开cmd,安装具体命令如下: pip3 install pyinstaller  2.使用pyinstaller库打包文件 假设Python源文件LPR ...

  3. Java类型转换详解

    Java类型转换详解 最近有同学问:自动类型转换老是记不住,到底是大转小,还是小转大 其实这个不用死记硬背,很好理解,我们拿 int 和 short 来举例: int 是 4 字节,也就是 32 bi ...

  4. Mybatis-Dao层实现（通过代理方式）

    1.代理方式开发是主流 2.Mapper接口开发方法只需要编写Mapper接口(相当于Dao接口),然后由Mybatis根据接口创建动态代理对象 Mapper接口开发需要遵循以下规范 一一对应 Use ...

  5. 【直播回顾】OpenHarmony知识赋能第四期第四课——音频驱动开发

    3月31日晚上19点,知识赋能第四期直播的第四节,也是本期最后一节直播课​<OpenHarmony标准系统HDF框架之音频驱动开发>​,在OpenHarmony开发者成长计划社群内成功举办 ...

  6. python基础练习题（题目 学习使用auto定义变量的用法）

    day28 --------------------------------------------------------------- 实例042:变量作用域 题目 学习使用auto定义变量的用法 ...

  7. Firefox 国外换为国内同步的服务器地址

    地址栏键入 about:config点击 接受风险并同意查找 identity把右侧字符串包含 firefox.com 替换为 firefox.com.cn 即换为国内同步服务器反之把 firefox ...

  8. Revit二次开发之创建风管

      在Revit中,风管用于连接管件,风道末端和机械设备,今天简单尝试了下使用RevitAPI创建风管,现分享下我的方法.   风管从类型上可分为三类:一般风管,软风管和风管占位符:从形状上也分为三类 ...

  9. vue build 指定环境

    前言 其实很简单的东西,搜索时很是费劲,特此记录下来.网上有很多资料,但都是五花八门,特此记录 使用 项目根目录中创建环境变量使用文件 .env #所有环境都会加载 .env.development ...

  10. 攻防世界-MISC:something_in_image

    这是攻防世界高手进阶区的第四题,题目如下: 点击下载附件一,得到一个压缩包,解压后得到一个文件,用010editor打开,搜索flag,即可得到flag 另外一种做法,根据题目包含image,使用ka ...