[TOC] Ionic Framework提供了几种不同的布局，可用于构建应用程序。从单页面布局到拆分窗格视图和模态。 ## 页眉和页脚布局 ### 页眉 header 最简单的布局包括一个header和content。应用程序中的大多数页面通常都具有这两个页面，但是为了使用内容不需要标题。 ~~~ <ion-app> <ion-header> <ion-toolbar> <ion-title>Header</ion-title> </ion-toolbar> </ion-header> <ion-content padding> <h1>Main Content</h1> </ion-content> </ion-app> ~~~ ### 页脚 footer 如您所见，标题中的工具栏显示在内容上方。有时，应用程序需要在内容下方有一个工具栏，即使用页脚时。 ~~~ <ion-app> <ion-content padding> <h1>Main Content</h1> </ion-content> <ion-footer> <ion-toolbar> <ion-title>Footer</ion-title> </ion-toolbar> </ion-footer> </ion-app> ~~~ ### 页眉和页脚 这些也可以组合在一个页面上*，*在内容的上方*和*下方有一个工具栏。 ~~~ <ion-app> <ion-header> <ion-toolbar> <ion-title>Header</ion-title> </ion-toolbar> </ion-header> <ion-content padding> <h1>Main Content</h1> </ion-content> <ion-footer> <ion-toolbar> <ion-title>Footer</ion-title> </ion-toolbar> </ion-footer> </ion-app> ~~~ ## 标签布局 由水平构成的布局[标签](https://ionicframework.com/docs/api/tabs)可用于让用户在内容视图之间快速切换。每个选项卡都可以使用`ion-router-outlet`或包含静态内容或导航堆栈`ion-nav`。 ~~~ <ion-app> <ion-tabs> <ion-tab tab="home"> <h1>Home Content</h1> </ion-tab> <ion-tab tab="settings"> <h1>Settings Content</h1> </ion-tab> <ion-tab-bar slot="bottom"> <ion-tab-button tab="home"> <ion-label>Home</ion-label> <ion-icon name="home"></ion-icon> </ion-tab-button> <ion-tab-button tab="settings"> <ion-label>Settings</ion-label> <ion-icon name="settings"></ion-icon> </ion-tab-button> </ion-tab-bar> </ion-tabs> </ion-app> ~~~ ## 菜单布局 移动应用程序之间的标准布局包括切换侧面的功能[菜单](https://ionicframework.com/docs/api/menu)通过单击按钮或从侧面打开它。侧边菜单通常用于导航，但它们可以包含任何内容。 ~~~ <ion-app> <ion-menu> <ion-header> <ion-toolbar color="primary"> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-list-header> Navigate </ion-list-header> <ion-menu-toggle auto-hide="false"> <ion-item button> <ion-icon slot="start" name='home'></ion-icon> <ion-label> Home </ion-label> </ion-item> </ion-menu-toggle> </ion-list> </ion-content> </ion-menu> <ion-page class="ion-page" main> <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-menu-toggle> <ion-button> <ion-icon slot="icon-only" name="menu"></ion-icon> </ion-button> </ion-menu-toggle> </ion-buttons> <ion-title>Header</ion-title> </ion-toolbar> </ion-header> <ion-content padding> <h1>Main Content</h1> <p>Click the icon in the top left to toggle the menu.</p> </ion-content> </ion-page> </ion-app> <ion-menu-controller></ion-menu-controller> ~~~ ## 拆分窗格布局 一个[拆分窗格](https://ionicframework.com/docs/api/split-pane)布局具有更复杂的结构，因为它可以组合以前的布局。它允许在视口位于指定断点之上时显示多个视图。如果设备的屏幕尺寸低于特定大小，则将隐藏拆分窗格视图。 默认情况下，拆分窗格视图将在屏幕大于`768px`或`md`断点时显示，但可以通过设置`when`属性来自定义以使用不同的断点。下面是一个示例，其中拆分窗格包含一个菜单，该菜单对于`sm`屏幕和向上可见，或者当视口大于时`576px`。通过水平调整浏览器大小以使应用程序小于此值，拆分窗格视图将消失。 ~~~ <ion-app> <ion-split-pane when="sm"> <ion-menu> <ion-header> <ion-toolbar color="primary"> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-list-header> Navigate </ion-list-header> <ion-menu-toggle auto-hide="false"> <ion-item button> <ion-icon slot="start" name='home'></ion-icon> <ion-label> Home </ion-label> </ion-item> </ion-menu-toggle> </ion-list> </ion-content> </ion-menu> <ion-page class="ion-page" main> <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-menu-toggle> <ion-button> <ion-icon slot="icon-only" name="menu"></ion-icon> </ion-button> </ion-menu-toggle> </ion-buttons> <ion-title>Header</ion-title> </ion-toolbar> </ion-header> <ion-content padding> <h1>Main Content</h1> </ion-content> </ion-page> </ion-split-pane> </ion-app> ~~~ 重要的是要注意具有该`main`属性的元素将是始终可见的主要内容。这可以是任何元素，包括[ion-nav](https://ionicframework.com/docs/api/nav)，[ion-router-outlet](https://ionicframework.com/docs/api/router-outlet)，或一个[ion-tabs](https://ionicframework.com/docs/api/tabs)。