ヘッダー

ヘッダーは画面の上部に配置し、全体にかかる情報やアイデンティなどを提供します。システム全体にかかるシステムヘッダーと画面・フロー全体にかかかるコンテンツヘッダーの二つを重ねて構成されます。

サイトヘッダーとコンテンツヘッダーを統合して圧縮しコンテンツ表示領域を広くすることもできます。

サイトヘッダー

システム全体に共通で使用するヘッダーです。全体で共通であるシステム名称やログイン情報などを配置します。

<nav class="navbar navbar-inverse" id="header-site">
  <div class="navbar-header">
    <h1 class="navbar-title"><a href="#fakelink">AstroBlaster for Supermarket</a></h1>
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-01-1" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
    </button>
  </div>
  <div class="navbar-collapse collapse" id="navbar-collapse-01-1">
    <div class="navbar-right">
      <p class="navbar-text navbar-logininfo">
        <span class="datetime">20XX/00/00</span><span class="username">000000 : Username</span><span><a href="#fakelink">ログアウト</a></span>
      </p>
      <p class="navbar-icon"><a href="#fakelink"><span class="icon-abui-guide"></span></a></p>
    </div>
  </div>
</nav>

サイドバーがある場合

サイドバーは幅1366px（一般的なノートPCのワイド画面サイズ）を境に表示と格納が切り替ります。格納時は、サイドバー表示のためのハンバーガーアイコンが表示されます。

サイドバーがある場合は.with-sidebarを付加し、toggleのためのボタンの記述を追加します。

<div class="navbar navbar-inverse with-sidebar" id="header-site">
  <div class="navbar-header">
    <button type="button" class="sidebar-toggle">
      <span class="sr-only">Toggle sidebar</span>
    </button>
    <h1 class="navbar-title"><a href="#">ABUI Document</a></h1>
  </div>
</div><!-- /.navbar -->

コンテンツヘッダー

画面およびフローに固有のヘッダーです。画面やフローのタイトルおよびおよびサブナビゲーションや関連画面へのリンクなどを配置します。

<nav class="navbar navbar-default navbar-lg" id="header-content">
  <div class="navbar-header">
    <h2 class="navbar-title">画面タイトル</h2>
  </div>
  ...
</nav><!-- /.navbar -->

タイトルをセパレーターで区切る

ひとつの画面フローで複数の画面がある場合は、画面タイトルとその画面ステイタスを区切ることができます。セパレーターはタイトル内にひとつだけとし、パンくずのように重ねて使わないようにしてください。ユーザーに画面構成と現在の行動についてシンプルに伝えるためのものであり、正確に階層構造を反映する必要はありません。

.navbar-title-separatorを使います。

<nav class="navbar navbar-default navbar-lg" id="header-content">
  <div class="navbar-header">
    <h2 class="navbar-title">顧客情報<span class="navbar-title-separator">｜</span>編集</h2>
  </div>
</nav>

前に戻るボタン

一つ前の画面に戻るボタンをつけることもできます。

<nav class="navbar navbar-default navbar-lg" id="header-content">
  <div class="navbar-header">
    <a href="#" class="btn-back"><span class="icon icon-abui-arrow-left"></span></a>
    <h2 class="navbar-title">タイトル</h2>
  </div>
</nav>

ヘッダー内の要素

メニュー

<ul class="nav navbar-nav">

  <li><a href="#fakelink">Item</a></li>

  <!-- Active -->
  <li class="active"><a href="#fakelink">Active</a></li>

  <!-- Dropdown -->
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
    <span class="dropdown-arrow"></span>
    <ul class="dropdown-menu">
      <li><dt>区分</dt><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated Sub Menu Element</a></li>
      <li><a href="#">Separated Element</a></li>
    </ul>
  </li>

</ul>

テキスト

<p class="navbar-text">テキスト</p>

未読

<ul class="nav navbar-nav">

  <!-- 未読あり -->
  <li><a href="#">Unread<span class="navbar-unread">1</span></a></li>

  <!-- 未読数表示 -->
  <li><a href="#">Badge<span class="navbar-new">1</span></a></li>

</ul>

ヘッダー内の要素をスモールスクリーン時に格納する

大画面の場合以外は要素が格納され、表示のためのスリードットアイコンが表示されます。

<div class="navbar-header">
  <h2 class="navbar-title mln"><a href="#fakelink">タイトル</a></h2>
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-05-1">
    <span class="sr-only">Toggle navigation</span>
  </button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-05-1">
  ...
</div><!-- /.navbar-collapse -->