ionic head and bottom

Header (header)

Header assembly is fixed to the top of the screen, you can pack such as the title and function buttons around.

ionic default provides many kinds of color style, you can call a different style name, of course, you can customize a.

bar-light

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

try it"

bar-stable

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

try it"

bar-positive

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

try it"

bar-calm

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

try it"

bar-balanced

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

try it"

bar-energized

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

try it"

bar-assertive

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

try it"

bar-royal

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

try it"

bar-dark

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

try it"

Sub Header (subtitled)

Sub Header is also fixed at the top, just below the Header it is, even if this did not write Header, Sub Header This style also has a Header from the top of the distance. Color style with Header.

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

try it"

Footer (bottom)

Footer is at the bottom of the screen can contain multiple content types.

<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>

try it"

Footer with the above Header, only the style name bar-header for doing bar-footer.

<div class="bar bar-footer">
  <button class="button button-clear">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

try it"

In addition, if the bottom has no title, but they need the right button, you need the right-hand button to add pull-right, such as:

<div class="bar bar-footer">
  <button class="button button-clear pull-right">Right</button>
</div>

try it"