--- title: Layout 布局 order: 25 group: path: /components nav: title: 组件 path: /components --- ## 使用 ### 顶部和侧边栏固定



### 基本使用

```jsx
import React from 'react';
import { Layout } from 'quanta-design';

const { Header, Footer, Content, Sider } = Layout;

const itemStyle = { marginBottom: 48 };
const headerStyle = { textAlign: 'center', color: '#fff' };
const contentStyle = {
  lineHeight: '120px',
  textAlign: 'center',
  background: 'rgb(24, 144, 255)',
  color: '#fff',
};
const footerStyle = {
  textAlign: 'center',
  background: '#f04134',
  color: '#fff',
};
const siderStyle = {
  lineHeight: '120px',
  textAlign: 'center',
  background: '#f5a623',
  color: '#fff',
};

export default () => (
  
    
      
        Header
        Content
        Footer
      
    
    
      
        Header
        
          Sider
          Content
        
        Footer
      
    
    
      
        Header
        
          Content
          Sider
        
        Footer
      
    
    
      
        Sider
        
          Header
          Content
          Footer
        
      
    
  
);
```