パソコンとモバイル端末で表示メニューを切り替える
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>
ページ下部に固定されたナビゲーションバー
おわりに
今回の記事では、複数の機能を持つ業務アプリケーションを作るうえで欠かせないナビゲーションバーを中心に説明しました。
次回は、複雑になりがちな業務アプリケーションを分かりやすくするためのリスト／パネル／タブなどをご紹介します。
