【Django(初学者向け)】超カンタン!Bootstrapの基本とナビゲーションバーを作る方法を解説!

Django

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

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

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

というDjango初学者はもちろん、HTML/CSS初学者の方々へ向けての記事となります

当記事を通じて、

  • Bootstrapの基本的な使い方
  • ナビゲーションバーを作る方法

について解説していきます

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

【参考:Django公式ホームページより】

サイトの目的に合わせて、いろいろな役割を担うナビゲーションバーですが、Bootstrapを使うことで短時間で作ることが可能です

是非ここで基本をマスターしてしまいましょう!

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

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

公式サイトでやりたいことは2つです

  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は公式ページがとても充実しているので

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

という流れでカンタンに使うことができます!

ナビゲーションバーに限らず、たくさんのサンプルがありますので「ちょっと見た目を整えたい!」というときはご活用いただくことをおススメします!

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

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

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」

という方は必見です!

【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!
タイトルとURLをコピーしました