什么是自适应布局

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. 动态div点击事件传递对象参数格式-草稿889

    <button type='button' style='border: 1px solid #eeeeee;color: #717070;height: 20px;border-radius: ...

  2. [ Linux ] 设置服务器开机自启端口

    https://www.cnblogs.com/yeungchie/ 需要用到的工具: crontab iptables crontab.set SHELL=/bin/bash PATH=/sbin: ...

  3. Python接口自动化——文件上传/下载接口

    〇.前言 文件上传/下载接口与普通接口类似,但是有细微的区别. 如果需要发送文件到服务器,例如:上传文档.图片.视频等,就需要发送二进制数据,上传文件一般使用的都是 Content-Type: mul ...

  4. Elasticsearch 使用-安装

    Elasticsearch 使用-安装 官方网站 https://www.elastic.co/cn/elasticsearch/ 什么是 Elasticsearch? Elasticsearch 是 ...

  5. 简单的js提示框,仅仅用jq和css就可以

    首先定义一个盒子 1 .pop { 2 position: fixed; 3 top: 20%; 4 left: 50%; 5 transform: translate(-50%); 6 width: ...

  6. 用Eclipse远程调试服务器tomcat

    BEGIN; 在做远程调试时,在windows系统和非windows系统下的配置,Tomcat中会有所差别,具体如下: 第一步.配置tomcat 一.在windows系统中: 打开�TALINE_HO ...

  7. 03. 树莓派初始配置——安装vim编辑器

    安装vim编辑器 树莓派系统默认是不带vim编辑器的,默认安装的vi编辑器在编辑文档的时候用得特别不舒服,对人体的血压和树莓派的寿命影响较大. 解决办法:一行命令 1. 安装vim编辑器 sudo a ...

  8. Jwt验证登录

    练习模板:https://gitee.com/zh1446802857/swagger-multi-version-api.git Jwt在我的 认知里,是一套门锁.别人(用户)需要用到你的接口 的时 ...

  9. 利用QEMU+GDB搭建Linux内核调试环境

    前言 对用户态进程,利用gdb调试代码是很方便的手段.而对于内核态的问题,可以利用crash等工具基于coredump文件进行调试. 其实我们也可以利用一些手段对Linux内核代码进行gdb调试,qe ...

  10. python3 常见错误(一)

    以下全部是在python3中适用. 错误一: 函数默认参数 Python允许为函数的参数提供默认的可选值.但是它可能会导致一些易变默认值的混乱.例子: 我们希望每次调用myFun函数,list1都为默 ...