Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<os-container>：外层容器。当子元素中包含 <os-header> 或 <os-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<os-header>：顶栏容器。

<os-aside>：侧边栏容器。

<os-main>：主要区域容器。

<os-footer>：底栏容器。

常见页面布局

Header

Main

html

<div class="demo-layout">
  <os-container>
    <os-header>Header</os-header>
    <os-main>Main</os-main>
  </os-container>
</div>

Header

Main

html

<div class="demo-layout">
  <os-container>
    <os-aside>Header</os-aside>
    <os-main>Main</os-main>
    <os-footer>Footer</os-footer>
  </os-container>
</div>

Aside

Main

html

<div class="demo-layout">
  <os-container>
    <os-aside>Aside</os-aside>
    <os-main>Main</os-main>
  </os-container>
</div>

Header

Aside

Main

html

<div class="demo-layout">
  <os-container>
    <os-header>Header</os-header>
    <os-container>
      <os-aside>Aside</os-aside>
      <os-main>Main</os-main>
    </os-container>
  </os-container>
</div>

Header

Aside

Main

html

<div class="demo-layout">
  <os-container>
    <os-header>Header</os-header>
    <os-container>
      <os-aside>Aside</os-aside>
      <os-container>
        <os-main>Main</os-main>
        <os-footer>Footer</os-footer>
      </os-container>
    </os-container>
  </os-container>
</div>

Aside

Header

Main

html

<div class="demo-layout">
  <os-container>
    <os-aside>Aside</os-aside>
    <os-container>
      <os-header>Header</os-header>
      <os-main>Main</os-main>
      <os-footer>Footer</os-footer>
    </os-container>
  </os-container>
</div>

Container 布局容器 ​

常见页面布局 ​

Container 布局容器

常见页面布局