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

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

ナビゲーションメニューの変更

　それでは、ナビゲーションを変更してみましょう。まず、クラス名を「<div class="navbar navbar-inverse navbar-fixed-top">」から「<div class="navbar navbar-default navbar-static-top">」へ変更して、メニューの色と配置を変えてみましょう。さらに、横に並んでいるAboutとContactのメニューをドロップダウンリンクに変更してみます。

ナビゲーションを変更（_Layout.cshtml）

<!-- (1) ナビゲーションバー（標準で色をデフォルト）の宣言 -->
<div class="navbar navbar-default navbar-static-top">
  <div class="container">

（中略）

  <!-- (6) 左側のページリンク メニュー（ドロップダウンに変更） -->
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>

        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              移動 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>@Html.ActionLink("Aboutへ", "About", "Home")</li>
                <li class="divider"></li>
                <li>@Html.ActionLink("Contactへ", "Contact", "Home")</li>
            </ul>
        </li>
    </ul>

PCサイズの場合のナビゲーションメニュー（変更後）

スマホサイズの場合のナビゲーションメニュー（変更後）

　メニューの色を白系に、ボタンをドロップダウンに変更してみました。リンクが増えてきた場合は、領域をコンパクトに使えるドロップダウンが便利です。ドロップダウンの詳細については、Bootstrapサイトのヘルプリンクをご覧ください。なお、ナビゲーションとドロップダウンは動的なアクションが存在するため、JavaScriptが有効である必要があります。

最後に

　以上、本記事では、Bootstrapのグリッドシステムとナビゲーションメニューについて説明しました。簡単にレスポンシブデザインを適用できることが理解できたと思います。最終回となる次回では、フォームとデザインの変更方法について紹介します。

参考資料

• Bootstrap Wikipedia（Wikipedia）
• BootstrapでレスポンシブなWebサイト制作（Gihyo.jp）
• Bootstrap 3.0入門（全18回）（ドットインストール）
• はじめてのBootstrap（書籍）