ナビゲーション
続いて、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>
ナビゲーションを表示するコードは上記のようになっています。ナビゲーションで設定できる項目は以下の通りです。
| 要素名 | クラス名 | 説明 |
|---|---|---|
| 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 | 右寄せ |
ナビゲーションの設定項目の詳細は、公式サイトの説明をご覧ください。
