【Bootstrap4】ナビゲーションバーを作る

Bootstrap4でナビゲーションバーを実装し、いろいろカスタマイズしていきます。

事前準備

まずはライブラリをダウンロードして、サイトに設置する。もしくはBootstrapCDNを参照してもよい。
https://getbootstrap.jp/docs/4.1/getting-started/download/

head

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
viewportの指定、設置したライブラリ(bootstrap.min.css、bootstrap.min.js)を読み込む。jQueryも必要なので一緒に読み込む。なお jQuery は bootstrap.min.js の前に読み込まないと エラー になるので注意。

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

<nav class="navbar navbar-light navbar-expand-md p-1">
  <a href="#" class="navbar-brand"><img src="img/logo.png" width="150" height="60"></a>
  <button class="navbar-toggler" type="button"
      data-toggle="collapse"
      data-target="#navmenu"
      aria-controls="navmenu"
      aria-expanded="false"
      aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navmenu">
    <ul class="navbar-nav">
      <li class="nav-item nav-link text-center active">Home</li>
      <li class="nav-item nav-link text-center">page-1</li>
      <li class="nav-item nav-link text-center">page-2</li>
      <li class="nav-item nav-link text-center">page-3</li>
      <li class="nav-item nav-link text-center">page-4</li>
      <li class="nav-item nav-link text-center">page-5</li>
    </ul>
  </div>
</nav>

主なクラスについて

navbar-brand --- サイトのロゴ、会社名など入れる
navbar-toggler --- スマートフォンなどで表示したときのメニューボタン
nav-item --- nav-link と合わせて各ページへのリンクを設定する。

動作確認

PC

bootstrap_test_pc.png

SP

ソースコード

https://github.com/s-watanabe-apps/bootstrap4-test.git

この記事へのコメント

スポンサーリンク