対象読者
本記事は、次の方を対象にしています。
- HTML5／CSS／JavaScriptを使ってWebアプリケーションの画面作成ができる方
- デザインに自信のない方
ナビゲーションバーとは
Bootstrapでメニューを作成するときは、ナビゲーションバーを使います。ナビゲーションバーとは、ウェブアプリがどのような機能をもっているかのメニューや、検索フォームなどをもち、ページのヘッダやフッタなどに配置するものです。また、スマートフォンなど表示幅の狭いモバイル端末では、ナビゲーションバーのメニューの詳細を省略して、ユーザが必要に応じてタップすることで、メニューを表示させるよう制御することもできます。
基本のナビゲーションバー
まずは次のような、基本のナビゲーションバーを配置する例を説明します。
サンプルコードは次のとおりです。
<!-- 1.ナビゲーションバーの設定 -->
<nav class="navbar navbar-default">
<div class="container">
<!-- 2.ヘッダ情報 -->
<div class="navbar-header">
<a class="navbar-brand">在庫管理システム</a>
</div>
<!-- 3.リストの配置 -->
<ul class="nav navbar-nav">
<li class="active"><a href="#">本部からのお知らせ</a></li>
<li><a href="#">在庫確認</a></li>
<li><a href="#">入出庫登録</a></li>
</ul>
<!-- 4.ボタン -->
<button type="button" class="btn btn-default navbar-btn">
<span class="glyphicon glyphicon-envelope"></span>
</button>
</div>
</nav>
コードの説明は次のとおりです。
1．ナビゲーションバーの作成
ナビゲーションバーを作成するには、nav要素を使います。nav要素のclass属性に"navbar"を指定します。ナビゲーションバーはWebアプリのイメージに合わせて配色を変えることができます。
配色は以下の設定ができます。
| class属性の設定値 | 説明 |
|---|---|
| navbar-default | 淡色ナビゲーションバー |
| navbar-inverse | 濃色ナビゲーションバー |
class属性に"navbar-inverse"を指定すると、次のように黒い背景のナビゲーションバーが配置されます。
2. ヘッダ情報
ナビゲーションバーにヘッダ情報を指定するには、div要素のclass属性に"navbar-header"を指定します。ヘッダ情報の中に、Webアプリの名前などを表示させたいときは、class属性に"navbar-brand"を指定します。
3.リストの配置
リストを配置するには、ul要素のclass属性に"nav"と"navbar-nav"を指定します。メニューをクリックするとリンクするようにするにはli要素内のa要素でリンク先URLを指定します。
4.ボタンの配置
ボタンを配置するには、button要素のclass属性に"btn"と"navbar-btn"を指定します。このサンプルコードでは、ボタンの中に封筒のグリフアイコンを表示しています。ボタンの詳細については、連載の第2回を参考にしてください。
入力フォーム
メニューに検索フォームなどを配置することもできます。ナビゲーションバーの入力フォームは、form要素のclass属性に"navbar-form"を指定します。なお、ナビゲーションバーのなかに任意の文字列を表示したいときは、p要素のclass属性に"navbar-text"を指定します。
<p class="navbar-text">在庫検索</p>
<form class="navbar-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="キーワード">
</div>
<button type="submit" class="btn btn-info">検索</button>
</form>
