layui/example/docs/zh-CN/components/layout.md

::: anchor :::

::: title 基本介绍 :::

::: describe 既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。 :::

::: title 基础使用 :::

::: demo

header content footer <script> import { ref } from 'vue'; export default { setup() { return { } } } </script> <style> .example .layui-footer, .example .layui-header { line-height: 60px; text-align: center; background: #87ca9a; color: white; } .example .layui-side { display: flex; background: #77c38c; align-items: center; justify-content: center; color: white; } .example .layui-body { display: flex; background: #5FB878; align-items: center; justify-content: center; color: white; } </style>

:::

::: title 左右布局 :::

::: demo

left content right <script> import { ref } from 'vue'; export default { setup() { return { } } } </script> <style> .example .layui-footer, .example .layui-header { line-height: 60px; text-align: center; background: #87ca9a; color: white; } .example .layui-side { display: flex; background: #77c38c; align-items: center; justify-content: center; color: white; } .example .layui-body { display: flex; background: #5FB878; align-items: center; justify-content: center; color: white; } </style>

:::

::: title 后台布局 :::

::: demo

header side content <script> import { ref } from 'vue'; export default { setup() { return { } } } </script> <style> .example .layui-footer, .example .layui-header { line-height: 60px; text-align: center; background: #87ca9a; color: white; } .example .layui-side { display: flex; background: #77c38c; align-items: center; justify-content: center; color: white; } .example .layui-body { display: flex; background: #5FB878; align-items: center; justify-content: center; color: white; } </style>

:::

::: title 复杂布局 :::

::: demo

side header body footer

---

header body footer side

---

Header Left Content Footer

---

Header Content Right Footer <script> import { ref } from 'vue'; export default { setup() { return { } } } </script> <style> .example .layui-footer, .example .layui-header { line-height: 60px; text-align: center; background: #87ca9a; color: white; } .example .layui-side { display: flex; background: #77c38c; align-items: center; justify-content: center; color: white; } .example .layui-body { display: flex; background: #5FB878; align-items: center; justify-content: center; color: white; } </style>

:::

::: title 布局组件 :::

::: table

组件	描述
lay-layout	容器	--
lay-header	顶部	--
lay-logo	图标	--
lay-side	侧边	--
lay-body	内容	--
lay-footer	底部	--

:::

::: comment :::

::: previousNext layout :::