cabeça iônica e inferior

Header (cabeçalho)

montagem de cabeçalho é fixado à parte superior da tela, você pode embalar tais como os botões de título e função ao redor.

padrão iônica fornece muitos tipos de estilo de cor, você pode chamar um nome de estilo diferente, é claro, você pode personalizar a.

bar-luz

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

tente »

bar-estável

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

tente »

bar-positiva

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

tente »

bar-calma

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

tente »

bar-equilibrada

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

tente »

energizado-bar

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

tente »

bar-assertiva

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

tente »

bar-royal

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

tente »

bar-escuro

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

tente »

Sub Header (legendado)

Sub cabeçalho também é fixa na parte superior, um pouco abaixo do cabeçalho é, mesmo que este não escrever Cabeçalho, Sub Cabeçalho Este modelo também tem um cabeçalho a partir do topo da distância. estilo de cor com cabeçalho.

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

tente »

Rodapé (parte inferior)

Rodapé está no fundo da tela podem conter vários tipos de conteúdo.

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

tente »

Rodapé com o cabeçalho acima, apenas o nome do estilo bar-header para fazer bar-rodapé.

<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>

tente »

Além disso, se o fundo não tem título, mas eles precisam o botão direito, você precisa o botão do lado direito para adicionar pull-direita, tais como:

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

tente »