布局 Layout

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

".open-container"：外层容器，默认子元素会垂直上下排列。

".open-container-horizontal"：外层容器，修改子元素为水平左右排列。

".open-heder"：顶栏容器。

".open-aside"：侧边栏容器。

".open-main"：主要区域容器。

".open-footer"：底栏容器。

常见布局 1

header

main

footer

显示代码

<!-- 垂直布局 -->
<div class="open-container open-container-vertical">
	<header class="open-header">header</header>
	<main class="open-main">main</main>
	<footer class="open-footer">footer</footer>
</div>

常见布局 2

aside

main

显示代码

<!-- 左右布局 -->
<div class="open-container">
	<aside class="open-aside">aside</aside>
	<main class="open-main">main</main>
</div>

常见布局 3

header

aside

main

显示代码

<!-- 左右布局 -->
<div class="open-container open-container-vertical">
	<header class="open-header">header</header>
	<div class="open-container">
		<aside class="open-aside">aside</aside>
		<main class="open-main">main</main>
	</div>
</div>

常见布局 4

header

aside

main

footer

显示代码

<!-- 左右布局 -->
<div class="open-container open-container-vertical">
	<header class="open-header">header</header>
	<div class="open-container">
		<aside class="open-aside">aside</aside>
		<div class="open-container open-container-vertical">
			<main class="open-main">main</main>
			<footer class="open-footer">footer</footer>
		</div>
	</div>
</div>

常见布局 5

aside

header

main

显示代码

<!-- 左右布局 -->
<div class="open-container">
	<aside class="open-aside">aside</aside>
	<div class="open-container open-container-vertical">
		<header class="open-header">header</header>
		<main class="open-main">main</main>
	</div>
</div>

常见布局 6

aside

header

main

footer

显示代码

<!-- 左右布局 -->
<div class="open-container">
	<aside class="open-aside">aside</aside>
	<div class="open-container open-container-vertical">
		<header class="open-header">header</header>
		<main class="open-main">main</main>
		<footer class="open-footer">footer</footer>
	</div>
</div>