ant-design/components/layout/demo/basic.md

order, title

order	title
0	zh-CN en-US 基本结构 Basic Structure

zh-CN

典型的页面布局。

en-US

Classic page layouts.

import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

ReactDOM.render(
<div>
  <Layout>
    <Header>Header</Header>
    <Content>Content</Content>
    <Footer>Footer</Footer>
  </Layout>

  <Layout>
    <Header>Header</Header>
    <Layout>
      <Sider>Sider</Sider>
      <Content>Content</Content>
    </Layout>
    <Footer>Footer</Footer>
  </Layout>

  <Layout>
    <Header>Header</Header>
    <Layout>
      <Content>Content</Content>
      <Sider>Sider</Sider>
    </Layout>
    <Footer>Footer</Footer>
  </Layout>

  <Layout>
    <Sider>Sider</Sider>
    <Content>
      <Header>Header</Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Content>
  </Layout>
</div>
, mountNode);

<style> #components-layout-demo-basic .code-box-demo { text-align: center; } #components-layout-demo-basic .ant-layout-header, #components-layout-demo-basic .ant-layout-footer { background: #7dbcea; color: #fff; } #components-layout-demo-basic .ant-layout-footer { line-height: 1.5; } #components-layout-demo-basic .ant-layout-sider { background: #3ba0e9; color: #fff; line-height: 120px; } #components-layout-demo-basic .ant-layout-content { background: rgba(16, 142, 233, 1); color: #fff; min-height: 120px; line-height: 120px; } #components-layout-demo-basic > .code-box-demo > div > .ant-layout { margin-bottom: 48px; } #components-layout-demo-basic > .code-box-demo > div > .ant-layout:last-child { margin: 0; } </style>