ナビゲーション
続いて、Bootstrapの主要パーツである「ナビゲーション」について確認しましょう。ナビゲーションとは、ページの一番上に表示されているメニューのことです。ナビゲーションでは、デバイス幅によって表示内容が自動的に調整されます。
![スマホサイズの場合のナビゲーションメニュー](http://cz-cdn.shoeisha.jp/static/images/article/7802/7802_06c.png)
Bootstrapであれば、決まったHTMLを書くだけで、このナビゲーションを簡単に実装できます。ナビゲーションのHTMLは共通レイアウト「_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 | 右寄せ |
ナビゲーションの設定項目の詳細は、公式サイトの説明をご覧ください。