【Django】Bootstrapでナビゲーションバーを設置する

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2021年11月)

✔当記事は以下のような方に向けて書かれています。

「Bootstrapの基本的な使い方が知りたい!」

「Bootstrapでナビゲーションバーを作りたい!」

✔当記事を通じてお伝えすること

  • Bootstrapの基本的な使い方
  • ナビゲーションバーを作る方法とそのコード
  • リストビュー・ディテールビューのコード公開

ナビゲーションバーとは、各HPの最上部にあることが多く、ほかのページへの行き来がしやすいよう作られています。

(参考:Django公式ホームページより)

CSSを駆使して作ることもできないわけではないですが、Bootstrapを使えばとても簡単。

ナビゲーションバーは実際のコードと解説付き、リストビューとディテールビューのコードも合わせて載せておきます。

✔YouTube解説動画

当記事の内容は動画を見ながら進めると、約15分程度で完了します。

動画ならではの情報も解説しているので、記事と一緒にご覧ください。

動画の概要欄には、単元ごとのコードを紹介しているgithubページも載せています。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

Bootstrapの公式ページから必要な情報をGET!

まずは公式サイトにて必要な情報を入手しましょう!

公式サイトで以下をおこないます。

  1. CDNを取得してHTMLへコピペ
  2. ドキュメントから対象のテンプレートを見つけてHTMLへコピペ

CDNの取得

スターターテンプレートをお使いの方は下記は不要。

✔CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

✔JSファイル

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

公式ドキュメントより抜粋(2021年11月時点)

Bootstrap Iconも使えるのでCDNを追加しておくのもおススメ!

Bootstrap IconのCDNはこちらからどうぞ!

最新版は公式ホームページから取得すること。

ドキュメントからNavbarテンプレートの取得

「Navbar」ドキュメントから自分のイメージに近いものを選びましょう!

私はこちらを選択。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

公式ドキュメントより抜粋(2021年11月時点)

Bootstrapのトップページからは下記のように進んでいきましょう!

他にもたくさんあるので、いろいろと見てみましょう!

次章で編集した結果をご紹介します。

編集後のコード&イメージ

要素の配置などを変更し、できたナビゲーションバーは下記の通りです↓

コードはこちらになります↓

<nav class="navbar navbar-dark bg-primary">
    <div class="container-fluid">
      <div>
        <a class="navbar-brand" href="#">
            <i class="bi bi-bootstrap-fill" style="font-size: 2rem;"></i>
        </a>
      </div>
      <div class="flex-grow-1" style="max-width:500px;">
        <form class="d-flex" method="GET">
          <input class="form-control me-2" type="search" placeholder="検索..." aria-label="Search" name="search">
          <button class="btn btn-outline-light" type="submit">search</button>
        </form>
      </div>
      <div class="text-light nav-item dropdown">
          <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            ユーザー名
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">アカウント設定</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">ログアウト</a></li>
          </ul>
      </div>
    </div>
  </nav>

通常では、こちらをHTML内でbodyタグの最上部に記述すれば完了。

Djangoをお使いの方は、ベースとなっているテンプレート内に記述しておきましょう!

一覧ページ:リストビューにBootstrap適用

リストビューにも変更を加えました。

以下の順でご覧ください。

  • 変更箇所
  • 変更前後のページビュー
  • 実際のコード

リストビューの変更箇所

  • +ボタンでクリエイトビューへ
  • タイトルをクリックするとディテールビューへ
  • 編集をクリックするとアップデートビューへ
  • 削除をクリックするとデリートビューへ

変更前後のページビュー

Bootstrapのカードを使い、タイトル、内容、他ページへのリンクを貼るように設定しました。

ビフォー

Bootstrap適用前のListView

アフター

Bootstrap適用後のListView

※フッターは次回作成します。

リストビューコード実例

詳細ページや編集ページへのリンクには、「pk」を渡しています。

{% extends "base.html" %}
{% block title %}日報アプリ一覧{% endblock %}
{% block content %}
<div class="container">
        <div class="mt-3 d-flex justify-content-end">
            <a href={% url "nippo-create" %} class="btn btn-outline-primary float-right">
              <i class="bi bi-plus"></i>
            </a>
        </div>
        {% for obj in object_list %}
            <div class="card my-3">
                <div class="card-body">
                    <h5 class="card-title">
                        <a href={% url 'nippo-detail' obj.pk %}>
                            {{ obj.title}}
                        </a>
                    </h5>
                    <p class="card-text">
                        {{ obj.content }}
                    </p>
                    <a href={% url 'nippo-update' obj.pk %} class="card-link">
                        編集
                    </a>
                    <a href={% url 'nippo-delete' obj.pk %} class="card-link">
                        削除
                    </a>
                </div>
            </div>
        {% endfor %}
</div>
{% endblock %}

詳細ページ:ディテールビューにBootstrap適用

ディテールビューの変更についてもご紹介します。

以下の順でご覧ください。

  • 変更箇所
  • 変更前後のページビュー
  • 実際のコード

ディテールビューの変更箇所

  • 編集をクリックするとアップデートビューへ
  • 削除をクリックするとデリートビューへ

変更前後のページビュー

ビフォー

Bootstarp適用前のディテールビュー

アフター

Bootstrap適用後のディテールビュー

※フッターは次回作成します。

ディテールビューのコード実例

{% extends 'base.html' %}
{% block title %}{{ object.title }}の詳細{% endblock %}
{% block content %}
<div class="container">
    <div class="card mx-auto my-5 w-50" style="min-width:300px;">
        <div class="card-header">
            {{ object.timestamp }}
        </div>
        <div class="card-body">
            <h3 class="card-title">{{ object.title }} </h3>
            <p class="card-text">{{ object.content }}</p>
            <div class="w-50">
                <a href={% url 'nippo-update' object.pk %} class="btn btn-primary btn-sm">編集</a>
                <a href={% url 'nippo-delete' object.pk %} class="btn btn-danger btn-sm">削除</a>
            </div>
        </div>
    </div> 
</div>
{% endblock %}

まとめ

Bootstrapは公式ページがとても充実しているので、以下の流れをおさえれば簡単に実装できます。

  1. CDNの取得
  2. 必要なテンプレートを検索、コピペ
  3. テンプレートを編集していく

ナビゲーションバーに限らず、たくさんのサンプルがありますので、ぜひご活用ください。

次回は、フッターを作っていきます。

フッターは、CSSファイルで独自にカスタマイズしていきますので、DjangoでCSSファイルを読み込む方法などを含めて解説していきます。

タイトルとURLをコピーしました