企业官网建设流程全解析

Ant Design 上中下布局（Header-Content-Footer）实战指南：从官方示例到源码实现

【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design

本篇技术指南以 Ant Design 官方「上中下布局」（top layout，即最基础的Header-Content-Footer三段式布局）为对象，讲解其在当前仓库中的标准写法、适用场景与设计规则，并深入Layout组件的源码实现与样式 Token 体系，帮助你理解这类经典顶部导航布局的原理，掌握在实际项目中快速落地与按需定制的能力。读完你将能够：直接复用官方示例搭建完整页面骨架、理解Layout/Header/Content/Footer的组件关系与默认尺寸来源，并能结合Sider等变体判断何种信息结构适合顶部导航。

什么是「上-中-下」布局

「上-中-下」布局（官方英文名为header-content-footer layout）是 Ant Design 中最基本、也最经典的一种页面级布局形态：页面在纵向上被切分为顶部导航区（Header）、主内容区（Content）、底部页脚区（Footer）三部分。相关定义与设计说明收录于 components/layout/demo/top.md，配套可运行示例位于 components/layout/demo/top.tsx。

导航区的基本构成

按照官方文档描述，这种布局将主导航放置于页面顶端，从左自右依次为：

1. logo（品牌标识）；
2. 一级导航项（水平排列的菜单）；
3. 辅助菜单（用户、设置、通知等）。

固定宽度内容的稳定性

文档强调：通常将内容放在固定尺寸（例如 1200px）的容器内，这样整个页面的排版保持稳定，不会受用户终端显示器尺寸差异的影响。这一点与下方源码剖析中 Header/Content 采用 flex 自适应、同时通过内边距约束内容区宽度的实现方式相辅相成——固定的内容宽度带来的是跨终端一致的阅读体验。

优缺点与适用边界

也就是说：如果你的业务有大量平级的一级导航（例如十几个顶级栏目），顶部导航会出现横向拥挤甚至溢出，此时应优先考虑侧边导航（参考 侧边布局示例）。

完整示例代码与逐段讲解

官方示例 components/layout/demo/top.tsx 是理解该布局的最小完整实现，完整代码如下：

import React from 'react'; import { Breadcrumb, Layout, Menu, theme } from 'antd'; const { Header, Content, Footer } = Layout; const items = new Array(15).fill(null).map((_, index) => ({ key: index + 1, label: `nav ${index + 1}`, })); const App: React.FC = () => { const { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken(); return ( <Layout> <Header style={{ display: 'flex', alignItems: 'center' }}> <div className="demo-logo" /> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items} style={{ flex: 1, minWidth: 0 }} /> </Header> <Content style={{ padding: '0 48px' }}> <Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb.Item>Home</Breadcrumb.Item> <Breadcrumb.Item>List</Breadcrumb.Item> <Breadcrumb.Item>App</Breadcrumb.Item> </Breadcrumb> <div style={{ background: colorBgContainer, minHeight: 280, padding: 24, borderRadius: borderRadiusLG, }} > Content </div> </Content> <Footer style={{ textAlign: 'center' }}> Ant Design ©{new Date().getFullYear()} Created by Ant UED </Footer> </Layout> ); }; export default App;

Header 区：logo 与水平菜单的弹性布局

Header内部通过display: 'flex'与alignItems: 'center'将 logo（.demo-logo占位元素）与Menu水平排布；Menu设置flex: 1, minWidth: 0使其占据剩余全部宽度——minWidth: 0是关键细节，它允许菜单在空间不足时收缩而不会被内容撑破。菜单使用mode="horizontal"呈水平条状，theme="dark"与深色 Header 背景融合，defaultSelectedKeys={['2']}指定默认高亮项。

Content 区：面包屑 + 主题 Token 内容卡片

Content使用padding: '0 48px'在左右留白，内部依次为：

• Breadcrumb（面包屑导航），margin: '16px 0'提供纵向间距，用于展示Home / List / App的层级路径；
• 内容卡片：借助theme.useToken()取出的colorBgContainer作为卡片背景色、borderRadiusLG作为圆角，配合minHeight: 280、padding: 24形成一块可见的主工作区容器。通过 Design Token 取色而非硬编码颜色，可以保证卡片随全局主题（明/暗）自动适配。

Footer 区：居中页脚

Footer通过textAlign: 'center'居中显示版权信息，new Date().getFullYear()动态输出当前年份。

组件结构与源码实现剖析

上中下布局的底层由Layout复合组件支撑。入口文件 components/layout/index.tsx 将Layout与其子组件Header、Footer、Content、Sider挂载为复合组件：

Layout.Header = Header; Layout.Footer = Footer; Layout.Content = Content; Layout.Sider = Sider;

generator 工厂：一个函数生成四种布局容器

在核心实现 components/layout/layout.tsx 中，Header、Footer、Content与Layout本体全部由同一个generator工厂函数生成（layout.tsx#L133-L154）：

generator内部通过React.forwardRef将suffixCls与tagName透传给Basic组件（layout.tsx#L38-L66），最终渲染为带ant-layout-header、ant-layout-content、ant-layout-footer类名的语义化 HTML 标签，这对 SEO 与无障碍可访问性都是加分项。

BasicLayout：flex 容器与 Sider 检测

Layout本体由BasicLayout实现（layout.tsx#L68-L131），关键机制包括：

• 通过LayoutContext.Provider向子级提供siderHook，供Sider注册/注销自身（addSider/removeSider）；
• 通过useHasSider自动检测子元素中是否存在Sider，若存在则为容器追加ant-layout-has-sider类名，从而让 flex 主轴方向从纵向（column）切换为横向（row）。上中下布局由于不包含Sider，天然保持纵向排列。

测试用例 components/layout/tests/index.test.tsx 中的detect the sider as children用例正是对该机制的回归验证：渲染<Layout><Sider>…</Sider><Content>…</Content></Layout>后断言.ant-layout包含ant-layout-has-sider类名。

样式实现：flex 布局与默认尺寸

样式源码 components/layout/style/index.ts 展示了布局的核心 CSS 逻辑（index.ts#L125-L149）：

• Layout容器：display: flex; flex: auto; flexDirection: column;，即默认纵向堆叠；
• Header与Footer：flex: 0 0 auto，即高度不随内容伸缩；
• Content：flex: auto，自动吸收剩余纵向空间，撑满整个主工作区；
• 全局box-sizing: border-box，避免内边距撑破尺寸。

设计规则：尺寸规范与 Design Token 印证

上中下布局的尺寸并非随意设定。官方文档 components/layout/index.zh-CN.md 的设计规则章节给出了明确的数值体系：

尺寸规范

• 顶部导航（大部分系统）：一级导航高度64px，二级导航48px；
• 顶部导航（展示类页面）：一级导航高度80px，二级导航56px；
• 顶部导航高度的取值范围计算公式：48 + 8n；
• 侧边导航宽度的取值范围计算公式：200 + 8n。

源码印证：Header 默认高度 64px

这些规范在源码中有直接对应。prepareComponentToken（style/index.ts#L283-L320）中：

headerHeight: controlHeight * 2, // controlHeight 默认 32 → 64px headerPadding: `0 ${paddingInline}px`, // paddingInline = controlHeightLG * 1.25 → 默认 50px footerPadding: `${controlHeightSM}px ${paddingInline}px`,

即Header默认高度等于全局controlHeight（默认32px）的两倍——64px，与设计规则中「大部分系统一级导航高度 64px」完全吻合；默认水平内边距为controlHeightLG × 1.25（默认50px）。此外headerBg: '#001529'、siderBg: '#001529'是官方深色导航的基准色。

Header样式还包含一处与Menu的协同细节（style/index.ts#L257-L261）：

[`${antCls}-menu`]: { lineHeight: 'inherit', },

它让 Header 内水平菜单的行高继承 Header 高度，从而菜单项与导航条视觉上等高对齐，这正是上中下布局中 Header+Menu 组合看起来浑然一体的原因。

交互与视觉要点

按官方文档，顶部导航还应注意：

• 一级导航和末级导航需要在可视化层面被强调出来，当前项在呈现上优先级最高；
• 视觉强调手段按力度从强到弱依次为：大色块强调（适用于深色底色的父级导航项）、高亮火柴棍（适用于浅色底、导航路径最终项）、字体高亮变色（通常用于当前项的上一级）、字体放大（12px、14px为标准字号，14 号用于一、二级导航）。

布局变体对比：何时用上中下，何时用侧边

官方代码演示集中提供了多种布局形态（见 components/layout/index.zh-CN.md 的「代码演示」列表），上中下布局与它们的取舍关系如下：

例如 top-side.tsx 中，Header内是横向一级菜单（items1），Content内再嵌套一个包含Sider与内层Content的Layout用于承载二级菜单（items2），实现了「顶部分类 + 侧边明细」的两级导航结构——这是对上中下布局的常见演进。

小结

上中下布局是 Ant Design 中「开箱即用」的经典页面骨架：Layout纵向堆叠Header/Content/Footer，Header 以弹性布局容纳 logo 与水平菜单，Content 通过 Design Token 呈现内容卡片，Footer 承载版权信息。通过 示例代码 可快速复制落地；通过 核心实现 与 样式实现 可理解其 flex 布局原理与64px等默认尺寸的来源；结合 官方文档 的设计规则与变体对比，即可为自己的项目选择最合适的导航结构。若你的系统一级导航数量较多、层级较深，则建议改用侧边布局或顶部-侧边布局。

【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design