--- title: 上下布局 order: 0 --- 1. `Layout`: 布局容器，其下可嵌套`Header` `Aside` `Body` `Footer`以及`Layout`，可以放置任何容器中 2. `Header`: 顶部导航条，只能放置`Layout`中 3. `Aside`: 侧边栏，只能放置`Layout`中 4. `Body`: 主题部分，只能放置`Layout`中 5. `Footer`: 底部容器，只能放置`Layout`中上下布局，导航条和侧边栏为左右关系 > 布局组件采用`flex`实现，请注意[浏览器兼容性](https://caniuse.com/#search=flex)，IE需要10及以上 ```vdt import {Layout, Header, Aside, Body, Footer} from 'kpc/components/layout'; import {Menu, MenuItem} from 'kpc/components/menu'; import Icon from 'kpc/components/icon'; import {Breadcrumb, BreadcrumbItem} from 'kpc/components/breadcrumb';

LOGO

menu 1 menu 2 menu 3 sub menu 1 sub menu 2 sub menu 3 sub menu 4 option 1 option 2 menu 4

Home Detail

content

``` ```styl .logo width 160px height 30px line-height 30px text-align center color #fff background gray float left margin 17px 20px .k-breadcrumb margin 20px 0 ``` ```js export default class extends Intact { @Intact.template() static template = template; defaults() { return { expandedKeys: [], selectedKey: '3-1', }; } } ```