Ant Design 是一套优秀的 React UI 组件库，提供了丰富的组件和样式，可以快速构建出美观、高效的页面。本文将介绍如何使用 Ant Design 实现页面布局，包括 Grid、Layout、Menu 等组件的使用方法和常见布局示例。
Grid
Grid 是 Ant Design 中的栅格系统，提供了方便的布局方式。通过 Row 和 Col 组件可以实现灵活的布局效果。
基本用法
-- -------------------- ---- -------
------ - ---- --- - ---- -------
-------- ----- -
------ -
-----
-----
---- ----------------------
---- ----------------------
------
-----
---- --------------------
---- --------------------
---- --------------------
------
-----
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
------
--
-上面的代码展示了 Grid 的基本用法。Row 组件表示一行，Col 组件表示一列。span 属性表示列所占的宽度比例，取值范围为 1~24。
响应式布局
-- -------------------- ---- -------
------ - ---- --- - ---- -------
-------- ----- -
------ -
-----
-----
---- ------- ------- ------ ----------------
---- ------- ------- ------ ----------------
---- ------- ------- ------ ----------------
---- ------- ------- ------ ----------------
------
------
--
-通过设置 xs、sm、md 和 lg 属性，可以实现响应式布局。这里的意思是，当屏幕宽度小于 576px 时（即 xs），每列占满一行；当屏幕宽度在 576px<del>768px 之间（即 sm），每行显示两列；当屏幕宽度在 768px</del>992px 之间（即 md），每行显示三列；当屏幕宽度在 992px~1200px 之间（即 lg），每行显示四列。这样可以在不同的设备上呈现不同的布局效果。
Layout
Layout 是 Ant Design 中的布局组件，提供了 Header、Content、Sider 和 Footer 四个部分，可以实现常见的页面布局效果。
基本用法
-- -------------------- ---- -------
------ - ------ - ---- -------
----- - ------- -------- ------ ------ - - -------
-------- ----- -
------ -
--------
-----------------------
--------------------------
-----------------------
---------
--
-上面的代码展示了一个基本的页面布局。Header、Content 和 Footer 组件分别表示页面的顶部、中部和底部。这些组件的高度和宽度都可以通过 CSS 样式进行设置。Sider 组件表示页面的侧边栏，可以放置导航菜单等内容。
固定 Header 和 Footer
-- -------------------- ---- -------
------ - ------ - ---- -------
----- - ------- -------- ------ - - -------
-------- ----- -
------ -
--------
------- -------- --------- -------- ------- -- ------ ------ ------------------
-------- -------- ---------- -- --------------------
------- -------- --------- -------- ------- -- ------ ------ ------------------
---------
--
-通过设置 position 属性为 fixed，可以实现固定 Header 和 Footer 的效果。需要注意的是，固定 Header 和 Footer 会影响页面的滚动效果，需要通过设置 Content 的 marginTop 属性来避免 Header 遮挡页面内容。
侧边栏布局
-- -------------------- ---- -------
------ - ------- ---- - ---- -------
------ -
-------------
--------------------
---------------
- ---- --------------------
----- - ------- -------- ----- - - -------
-------- ----- -
------ -
--------
------- ----------------------------------
--------
------ ----------- -----------------------------------
-----
-------------
---------------------------
-------- ------- ------- ------------ - --
-
---------- ------- ------------------- ------- -------------
---------- ------- -------------------------- ------- -------------
---------- ------- --------------------- ------- -------------
-------
--------
------- -------- -------- -- ---- ----- ---
--------
----------------------------------
--------
-------- ---
------- --
---------- ----
--
-
-------
----------
---------
---------
---------
--
-通过使用 Sider 和 Content 组件，可以实现侧边栏布局。Sider 组件放置导航菜单，Content 组件放置页面内容。这里的示例代码中使用了 Ant Design 提供的 Menu 组件来实现导航菜单的样式。
总结
本文介绍了如何使用 Ant Design 实现页面布局，包括 Grid、Layout、Menu 等组件的使用方法和常见布局示例。通过学习这些内容，可以快速掌握 Ant Design 的基本用法，提高页面布局的效率和质量。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/66171dc9d10417a2226e17f3