【Bootstrap】ナビゲーションバー

 

自分でwebアプリを使ったときに、メニューをどうするか悩むことがあるかと思います。

 

今回の記事では、Bootstrapを使ってメニューをかっこよく配置する方法についてご紹介します。

 

 

ナビゲーションバーとは

 

下の図の青い部分がナビゲーションバーです。

 

 

Bootstrapを使うと、簡単にナビゲーションバーを配置することができます。

 

上部に固定するので、縦スクロールしても常にメニューが見えます。便利ですよね。

 

実装方法

 

Bootstrapの読み込み

 

毎度のことですが、<head></head>の中でbootstrapを読み込んでください。私の場合は、djangoでアプリを作っているのでstaticタグで読み込んでいますが、そうでない方は直接URL指定で読み込んでも構いません。

 

 

 

ナビゲーションバーの実装

 

上の図のように、Top、投稿、ログイン(ログアウト)、ユーザ登録、検索の5つのメニューを表示するためのコードを記載します。

 

 

container、row、colはグリッドレイアウトの基本でしたね。

 

ナビゲーションバーはclass=”navbar”です。 fixed-topで上に固定するようにしています。背景色は、bg-infoで青色にしています。

 

navbarの中に、<a>タグを使用することで、クリックしたときにジャンプするようにしています。

 

<form class=”form-inline”>で、検索フォームをナビゲーションバーの中に組み込んでいます。

 

まとめ

・ナビゲーションバーを使うと、メニュー表示がかっこよくなる
・ナビゲーションバーに検索フォームを組み込むことができる
・ナビゲーションバーの背景色は自由に変えられる

 

ABOUTこの記事をかいた人

のっくん

理系院卒で大企業の研究所に就職。 趣味はプログラミング、レアジョブ英会話、筋トレ、旅行。 Twitter:@yamagablog