标准&规范
容器和栅格标准
| 终端 | 默认pc | 小尺寸pc | pad | 移动端 |
|---|---|---|---|---|
| 分辨率 | 1920px及以上 | 1440px及以下 | 1200px及以下 | 768px及以下 |
| class | .col-lg-* | .col-lg-* | .col-md-* | .col-xs-* |
| 媒介适配 | 默认 | @media (max-width: 1440px) { } | @media (max-width: 1200px) { } | @media (max-width: 768px) { } |
| 容器类一 | .container | |||
| 容器类一宽度 | 1200px | 1200px | 1200px | none |
| 容器类二 |
1 外框容器：.container-separate
1.1 左侧导航：.container-separate-menu 1.2 内容：.container-separate-main |
|||
| 容器类二宽度 |
导航展开：width:calc(100% - 180px) margin-left:180px 导航收起：.mini-menu .fat-main width:calc(100% - 72px) margin-left:72px |
100% | 100% | |
| 容器类三 |
1 外框容器：.container-cloud
1.1 头部内容区：.container-header 1.2 内容：.container-main 1.2.1 导航内容区：.main-sidebar 1.2.2 内容主体：.main-content |
|||
| 容器类三 |
导航展开：width:calc(100% - 174px) margin-left:174px 导航收起：.sidebar-switch.on && .container-main.open-sidebar width:calc(100% - 50px) margin-left:50px |
100% | 100% | |
容器使用详细说明
设计说明
当前根据排版需求设计三类容器：
1. 定宽居中显示（.container）。eg:官网首页布局。
2.左右结构容器（.container-separate），左侧导航（.container-separate-menu），右侧内容区（.container-separate-main）。eg:当前demo布局。
3.上下（左右）结构容器（.container-cloud），上侧为头部内容区（.container-header），下侧为主内容区（.container-main），其中主内容区又分为左：导航内容区（.main-sidebar），右：内容主体区（.main-content）。eg:云端业务工作室布局。
开发规范
Dom结构
栅格使用详细说明
开发规范
容器中以行（.row）为单位，划分每列。每行最多12列，即每行的和要小于等于12。且允许有空列。
当前定义栅格有：.col-xs-*，.col-md-*，.col-lg-*，其中移动端和pad均采用.col-xs-*处理，pc若无特殊要求，仅适用.col-md-*即可。
适配要求：移动端、pad、1366*768、1920*1080
处理适配方式：分为移动端、pad，pc端，移动端/pad列（.col-xs-*）、pc端列（.col-md- 、 .col-lg-*）
Dom结构
如若需要单独处理适配，媒介查询写法按如下要求：
补充使用：特殊设备隐藏标签类
/* 隐藏 < 768px */
.hidden-xs
/* 768px < 隐藏 < 992px */
.hidden-sm
/* 992px < 隐藏 < 1220px */
.hidden-md
/* 隐藏 > 1220px */
.hidden-lg