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

 

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

 

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

 

 

ナビゲーションバーとは

 

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

 

 

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

 

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

 

実装方法

 

Bootstrapの読み込み

 

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

 

<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css'%}"/>

 

 

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

 

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

 

<div class="container justify-content-between">
    <div class="row">
        <div class="col-12">
            <nav class="navbar fixed-top navbar-light bg-info">
                <a href="{% url 'index' %}" class="nav-item nav-link text-light">Top</a>
                <a href="{% url 'post' %}" class="nav-item nav-link text-light">投稿</a>
                {% if user.is_authenticated %}
                    <a href="{% url 'logout' %}" class="nav-item nav-link text-light">ログアウト</a>
                {% else %}
                    <a href="{% url 'login' %}" class="nav-item nav-link text-light">ログイン</a>
                {% endif %}
                <a href="{% url 'signup' %}" class="nav-item nav-link text-light">ユーザ登録</a>
                <form  class="form-inline" action="{% url 'index' %}" method="post">
                    {% csrf_token %}
                    <input class="form-control mr-2" type="text" placeholder="Find" name="search">
                    <button class="btn btn-outline-light">検索</button>
                </form>
            </nav>
        </div>
    </div>

 

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

 

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

 

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

 

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

 

まとめ

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

 

ABOUTこの記事をかいた人

個人アプリ開発者。Python、Swift、Unityのことを発信します。月間2.5万PVブログ運営。 Twitter:@yamagablog