头部（Header）

在Ionic框架中，头部（Header）和底部（Footer）是重要的UI组件，它们分别固定在屏幕的顶部和底部。

头部（Header）

头部组件通常用于显示应用程序的标题、副标题和导航按钮。它是应用程序界面的顶部区域，可以包含多种元素，如文本、图标和按钮。Ionic提供了多种颜色样式供选择，例如：

• bar-light
• bar-stable
• bar-positive
• bar-calm
• bar-balanced
• bar-energized
• bar-assertive
• bar-royal
• bar-dark

这些样式可以通过不同的类名调用，也可以自定义样式。头部组件的示例代码如下：

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

副标题（Sub Header）

副标题组件也是固定在顶部，通常位于头部组件下方。即使没有写头部组件，副标题也会保持与顶部的距离。它的颜色样式与头部组件相同。示例代码如下：

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

底部（Footer）

底部组件位于屏幕的最下方，可以包含多种内容类型。它的使用与头部组件类似，只是将样式名从bar-header改为bar-footer。示例代码如下：

<div class="bar bar-footer bar-light">
  <h1 class="title">bar-light</h1>
</div>

这些组件的使用使得Ionic应用程序的界面更加整洁和一致，同时也提供了良好的用户体验【0†source】【1†source】【2†source】。