ASP.NETに採用されたBootstrapのグリッドシステム＆ナビゲーション

ASP.NET MVC5＋Bootstrapでレスポンシブでリッチなサイトを構築 第2回

ナビゲーション

　続いて、Bootstrapの主要パーツである「ナビゲーション」について確認しましょう。ナビゲーションとは、ページの一番上に表示されているメニューのことです。ナビゲーションでは、デバイス幅によって表示内容が自動的に調整されます。

スマホサイズの場合のナビゲーションメニュー

　Bootstrapであれば、決まったHTMLを書くだけで、このナビゲーションを簡単に実装できます。ナビゲーションのHTMLは共通レイアウト「_Layout.cshtml」に書かれています。

ナビゲーション部分のコード（_Layout.cshtml）

<body>

<!-- (1) ナビゲーションバー（色を反転させ、上に固定）の宣言 -->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

    <!-- (2) ヘッダーの宣言 -->
    <div class="navbar-header">

      <!-- (3) スマホ用のボタン -->
      <button type="button" class="navbar-toggle" 
              data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

     <!-- (4) ブランドロゴ -->
      @Html.ActionLink("アプリケーション名", "Index", "Home", null, new { @class = "navbar-brand" })
      <!-- ↓ 生成されるHTML ↓
      <a class="navbar-brand" href="/">アプリケーション名</a>
      -->
    </div>

    <!-- (5) メニューの宣言 -->
    <div class="navbar-collapse collapse">

      <!-- (6) 左側のページリンク メニュー -->
      <ul class="nav navbar-nav">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        <!-- ↓ 生成されるHTML ↓
        <li><a href="/">Home</a></li>
        <li><a href="/Home/About">About</a></li>
        <li><a href="/Home/Contact">Contact</a></li>
        -->
      </ul>

      <!-- (7) 右側のログイン メニュー -->
      @Html.Partial("_LoginPartial")
      <!-- ↓ 生成されるHTML ↓
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register" id="registerLink">登録</a></li>
        <li><a href="/Account/Login" id="loginLink">ログイン</a></li>
      </ul>
      -->
    </div>

  </div>
</div>
　　（中略）
</body>

　ナビゲーションを表示するコードは上記のようになっています。ナビゲーションで設定できる項目は以下の通りです。

ナビゲーションバー（navbar）で指定できるクラス例

要素名	クラス名	説明
div	navbar	ナビゲーションバーの領域
div	navbar-default	デフォルトのスタイル
div	navbar-inverse	文字色と背景色を反転し黒背景に白文字
div	navbar-fixed-bottom	スクリーンの下部固定のナビゲーション
div	navbar-fixed-top	スクリーンの上部固定のナビゲーション
div	navbar-static-top	スクロールすると消えるナビゲーション
div	navbar-header	ヘッダー領域（navbar-brandとnavbar-toggleを入れる）
a	navbar-brand	ブランド名・プロジェクト名のタイトル
a	navbar-link	ナビゲーション内のリンク（ナビ外と同じ通常のリンク）
p	navbar-text	ナビゲーション内のテキスト
form	navbar-form	検索窓などのフォーム要素を配置
button	navbar-toggle	ナビゲーション内のボタン（navbar-collapse折り畳み用）
button	navbar-btn	ナビゲーション内のボタン
div	navbar-collapse	折り畳みできるメニューコンテンツ
ul	navbar-nav	ナビゲーション内のリンク
ul	navbar-left	左寄せ
ul	navbar-right	右寄せ

　ナビゲーションの設定項目の詳細は、公式サイトの説明をご覧ください。