自分で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”>で、検索フォームをナビゲーションバーの中に組み込んでいます。
まとめ
・ナビゲーションバーを使うと、メニュー表示がかっこよくなる
・ナビゲーションバーに検索フォームを組み込むことができる
・ナビゲーションバーの背景色は自由に変えられる
・ナビゲーションバーに検索フォームを組み込むことができる
・ナビゲーションバーの背景色は自由に変えられる
