什么是自适应布局

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. Java 将Map按Value值降序排列

    1 /** 2 * 将集合按照降序排列-FLOAT 3 * @param nowPartTwoData 4 * @return 5 */ 6 private static List<Map.En ...

  2. EMS邮箱数据库常用命令（一）

    案例任务:创建名为"book"的邮箱数据库,数据库文件和日志文件存储位置为"c:\book". 键入以下命令. New-MailboxDatabase -Nam ...

  3. Python 速通爆肝、列表推导式、生成器、装饰器、生命游戏

    列表推导式.赋值.切片(替换.插入).字符串处理与判断.enumerate().格式化字符串.读写文件.global 关键字.字符串startswith().类与对象.生成器.装饰器.Self.*ar ...

  4. Codeforces Round #677 (Div. 3) D. Districts Connection思维1200

    题目链接 Problem - 1433D - Codeforces 题目 美好的一天,从看不懂题目开始~~ Example input 4 5 1 2 2 1 3 3 1 1 1 4 1 1000 1 ...

  5. 数据库基础知识详解四：存储过程、视图、游标、SQL语句优化以及索引

    写在文章前:本系列文章用于博主自己归纳复习一些基础知识,同时也分享给可能需要的人,因为水平有限,肯定存在诸多不足以及技术性错误,请大佬们及时指正. 11.存储过程 ​ 存储过程是事先经过编译并存储在数 ...

  6. Educational Codeforces Round 121 (Rated for Div. 2)——A - Equidistant Letters

    A - Equidistant Letters 题源:https://codeforces.com/contest/1626/problem/A 今天上午VP了这场CF,很遗憾的是一道题也没写出来,原 ...

  7. 软件工程web课程第一次实验作业

    开头总结 本次作业使用html+css+js实现了一个简单页面 最终我要记录的是使用js完成了轮播图中图片背景的转换 <script> window.onload = function ( ...

  8. Go 语言接口及使用接口实现链表插入

    @ 目录 1. 接口定义 1.1 空接口 1.2 实现单一接口 1.3 接口多方法实现 2. 多态 2.1 为不同数据类型的实体提供统一的接口 2.2 多接口的实现 3. 系统接口调用 4. 接口嵌套 ...

  9. selenium模块跳过用户名密码验证码输入，加载浏览器标签和cookie，进行翻页爬虫多页动态加载的数据（js)

    能解决登陆一次后,之后不需要二次登陆的动态加载数据,网页保存的cookie和标签,加入到selenium自动化测试浏览器中 1 from selenium import webdriver 2 imp ...

  10. EFCore 的 DbFirst 模式

    1 前言 EF6 时代,可以通过界面操作,添加数据库实体. EF Core 需要通过 CLI 来进行该操作,具体请参考EF Core官方文档:反向工程. 2 前置条件 PMC 工具(仅限 Visual ...