[Bootstrap]グローバルナビゲーションのコンポーネント”Navbar”の使い方

今回は Bootstrap を使って、グローバルナビゲーションを作成します。

Bootstrap を使ってグローバルナビゲーションを作成するには。
Navbar を使います。

これを使うことで、レスポンシブ対応となり、画面が小さいときには３本線のアイコンに変わります。

Navbar でグローバルナビゲーションを作成するには、まず領域を nav で囲み、
class=”navbar” を指定することで、ナビゲーションバーの使用を宣言します。

このときに、色の指定ができますが、
navbar-default　なら、白背景ベースのナビゲーションバーとなり、

navbar-inverse　を指定すると、黒背景ベースのナビゲーションバーとなります。

領域指定の構文は、デフォルトの色の指定で行うのなら

この領域の中にナビゲーションメニューを設置していきます。

まずはナビゲーションヘッダー領域を指定します。
これはdiv で領域を設定し、class=”navbar-header”を指定します。
この領域にはロゴ画像や３本線のアイコン、通称ハンバーガーメニューを設置します。

ハンバーガーメニューボタンの構文は

となります。

３本線を構成しているのが

の部分になります。

ハンバーガーメニューボタンは、スマホなどの小さい画面のときに、
ナビゲーションメニューをたたんで表示するのに使われます。
なお、PCでの画面などのように大きな画面の場合、
グローバルナビゲーションメニューが表示されます。

次に、ナビゲーションメニューを作成します。

まず、メニュー領域を div で設定し、
ウインドウサイズでハンバーガーメニューボタンと
グローバルナビゲーションメニューに切り替わるように
class=”collapse”　と class=”navbar-collapse” を設定します。

構文は

となります。

この中にメニューを作成します。

まず、ul タグにナビゲーションを使用するために class=”nav” を指定し、
ナビゲーションバーの使用をするために class=”navbar-nav”を指定します。

構文としては

というようになります。

ここまでが概要です。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。

なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開するととして展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

次に Bootstrap のライブラリの読み込みです。
ダウンロードして読み込む方法と、ネットから読み込む方法がありますが、
今回はネットから読み込む方法CDNの方法を使います。

でCSSファイルの読み込みをします。

で javascript を読み込みます。

この２つがないと Bootstrap は機能しません。

次に、グローバルナビゲーションの領域を設定します。
色はわかりやすくするために、黒にします。

を展開することで

を作成します。

次に、ナビゲーションヘッダーを div で作成します。

を展開し、

を作成します。

この中にメニューを作成します。

まずはハンバーガーメニューボタンを作成します。

を展開することで

を簡単に作成できます。

Emmet では *3 とすれば３つ作成することができます。
class=”” は .クラス名で記述し、id=”” の場合は #ID名で記述します。

[] の中には data-toggle などのパラメータを記述します。
複数の場合は半角スペースで区切って記述します。

今回の gnav というIDは、このハンバーガーメニューボタンに格納する領域の　divのID になります。
わかりやすく global navigation の略で gnav としました。

次に格納する項目を作成します。

を展開し、

を作成します。

この中に格納するリストを記述します。

を展開し、

を作成します。

Emmet では複数のクラスを指定するときには
.クラス名１.クラス名２
というように続けて書くようにします。

また、連番を作りたいときには $ を使用します。

これでグローバルナビゲーションができているので、ctrl + shirt + h で確認してみましょう。

これでハンバーガーメニューボタンが作成されているのがわかります。

画面を拡大すると、作成したリストが表示されるのがわかります。

また、ナビゲーションヘッダーに class=”navbar-brand” を設定することでサイト名を表示することもできます。

例えば、

を展開し

とすると、サイト名が表示されます。

それでは、今回の要点をまとめてみましょう。

・bootstrapのNavbar を使い、グローバルナビゲーションを作成すると、スマホサイズの画面ではハンバーガーメニューになる
・Navbar を使うには　class=”navbar” を指定する。
・Navbar の背景色は、navbar-defaultで白背景ベース、navbar-inverseで黒背景ベースにできる。
・class=”navbar-brand” を指定してサイト名をナビゲーションヘッダーに表示できる。

少々複雑ですが、Emmet を使うことで比較的簡単にグローバルナビゲーションの作成ができます。