Bootstrapでカッコいいナビゲーションバーを表示しよう

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第4回

パソコンとモバイル端末で表示メニューを切り替える

　Bootstrapでは、デバイスのサイズに応じて、情報の表示／非表示を切り替えることができます。

　コンテンツを表示するときはvisible-（デバイスの幅指定）、コンテンツを非表示にするときはhidden-（デバイスの幅指定）をclass属性で指定します。

　デバイス幅の指定は以下の通りです。

デバイス幅と指定方法の一覧

種類	デバイスの幅	デバイスの幅の指定方法
スマートフォン	768pxより狭い	xs
タブレット	768px以上	sm
デスクトップ	992px以上	md
大きなデスクトップ	1200px以上	lg

　次のサンプルコードは、入力フォームをモバイル端末で非表示するためにclass属性に"hidden-xs"を指定した例です。

リスト5 表示メニューを制御したナビゲーションバー（navibar5.htmlの抜粋）

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
    ～中略～
        <!-- ナビゲーションメニュー -->
        <div class="collapse navbar-collapse" id="navbar-menu">
            <ul class="nav navbar-nav">
            ～中略～
            </ul>

            <form class="navbar-form navbar-left hidden-xs">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="キーワード">
                </div>
                <button type="submit" class="btn btn-info">検索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                ～中略～
                </li>
            <ul>
        </div>
    </div>
</nav>

パソコンで表示したときのナビゲーションバー

　一方、モバイル端末（画面を狭めたとき）に表示すると、ナビゲーションバーの入力フォームのみが非表示になっているのが分かります。

モバイル端末（画面を狭めたとき）に表示したときのナビゲーションバー

ナビゲーションバーをページ上部／下部に固定

　ナビゲーションバーをページ上部に固定するには、nav要素のclass属性に"navbar-fixed-top"を指定します。そして、body要素のstyle属性でナビゲーションバーの表示領域分70pxのパディングを指定します。これによりページをスクロールしても、ページ上部にナビゲーションバーが固定されます。

リスト6 ページ上部に固定されたナビゲーションバー（navibar6.htmlの抜粋）

<body style="padding-top:70px;">
  <nav class="navbar navbar-inverse navbar-fixed-top" >
  ～中略～
  </nav>
  ～中略～
</body>

ページ上部に固定されたナビゲーションバー

　上部に固定されていますので、スクロールしたときも常にナビゲーションバーが上部に表示されています。

ページ上部に固定されたナビゲーションバー（スクロール時）

　同様にナビゲーションバーをページ下部に固定するには、nav要素のclass属性に"navbar-fixed-top"を指定します。そして、body要素のstyle属性でナビゲーションバーの表示領域分70pxのパディングを指定します。

リスト7 ページ下部に固定されたナビゲーションバー（navibar7.htmlの抜粋）

<body style="padding-bottom:70px;">
  <nav class="navbar navbar-inverse navbar-fixed- bottom" >
  ～中略～
  </nav>
～中略～
</body>

ページ下部に固定されたナビゲーションバー

おわりに

　今回の記事では、複数の機能を持つ業務アプリケーションを作るうえで欠かせないナビゲーションバーを中心に説明しました。

　次回は、複雑になりがちな業務アプリケーションを分かりやすくするためのリスト／パネル／タブなどをご紹介します。