Latest web development tutorials

イオンヘッドと下部

ヘッダ(ヘッダ)

ヘッダアセンブリは画面の上部に固定されている、あなたは、周りのタイトルや機能ボタンとしてパックすることができます。

イオンデフォルトは色のスタイルの多くの種類を提供し、あなたはもちろん、あなたがカスタマイズすることができ、異なるスタイル名を呼び出すことができます。

バーライト

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

»をお試しください

バー、安定しました

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

»をお試しください

バー陽性

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

»をお試しください

バー穏やかな

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

»をお試しください

バーバランスの取れました

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

»をお試しください

バー通電

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

»をお試しください

バー断定

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

»をお試しください

バー王室

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

»をお試しください

バー、暗いです

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

»をお試しください


サブヘッダ(字幕付き)

サブヘッダはまた、これはヘッダを書いていない場合でも、ちょうどそれがあるヘッダーの下に、上部に固定され、サブヘッダーこのスタイルはまた、距離の上からヘッダーを持っています。 ヘッダーとカラースタイル。

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

»をお試しください


フッター(下)

フッターは、画面の一番下にある複数のコンテンツタイプを含めることができます。

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

»をお試しください

上記ヘッダ、バー、フッターを行うための唯一のスタイル名のバーヘッダーとフッター。

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

»をお試しください

下部にタイトルが指定されていないが、彼らは右のボタンが必要な場合はさらに、次のような、プルライトを追加するには、右側のボタンを必要とします:

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

»をお試しください