在ionic1 中我们可以直接subheader这样的class属性来实现副标题

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

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

而在ionic2/3中我们却找不到这样的class，如何实现呢？

1、使用toolbar

<ion-header>
   <ion-navbar>
        <ion-title>Header</ion-title>
   </ion-navbar>

   <ion-toolbar>
        <ion-title>Subheader</ion-title>
   </ion-toolbar>
</ion-header>

注：这个方案在安卓上会存在一些样式问题，因为安卓的表天默认是靠左的，但存在返回按钮的时候 会出现上下不对齐的问题。

2、使用css

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

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

直接用了br+css 比较暴力

温柔的点儿，建议把主标题和副标题都分别设置css。

<ion-header>
  <ion-navbar>
    <div class="page-title">HEADING</div>
    <div class="page-sub-title">Sub Heading</div>
  </ion-navbar>
</ion-header>

.page-title{
   margin-top : -10px;
   color: #ffffff;
   font-size: 1.5em;
}

.page-sub-title{
   margin-top: - 25px;
   color: green;
   font-size : .9em;
}