Bootstrap | ナビゲーションバーの活用 - 学生向けプログラミング入門

Ruby on Rails6でBootstrap5.3を使ってみます。

まずはyarnでBootstrap5.3.2をインストールします。
コマンド
yarn add bootstrap@5.3.2

popper.jsをインストールします。
コマンド
yarn add @popperjs/core

「package.json」ファイルを確認します。

{
  "name": "AmateurReportWorld",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "bootstrap": "^5.3.2",
    "jquery": "3.6.0",
    "popper.js": "1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^2.0.5",
    "webpack-dev-server": "^4.15.1"
  }
}

「app/views/layouts/application.html.erb」ファイルのheadタグに以下の記述を追加します。

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Bootstrapを読み込むためのファイルを作成します。
「app/javascript」フォルダに、「stylesheets」フォルダを新規作成します。
そのフォルダの中に「application.scss」ファイルを新規作成します。
記述内容は以下のとおりです。

@import "~bootstrap/scss/bootstrap.scss";

「app/javascript/packs/application.js」ファイルに記述を追加します。

import "bootstrap";
import "../stylesheets/application.scss";

早速、ナビゲーションバーを作ってみます。

getbootstrap.com
上記のBootstrapサイトから、「Navbar」を選択し、サンプルをコピーしてみます。

ここからコードを編集します。

<!-- 1段目 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary z-3">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><h1><span class="h3" style="margin-left: 4rem;">Amateur Report World</span><br/><span class="h6" style="margin-left: 4.7rem;">アマチュアレポートワールド</span></h1></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" style="margin-left: 2rem; margin-top: 0.5rem"">
                <a class="btn btn-danger">レポーター登録</a>
            </li>

            <li class="nav-item">
                <a class="btn btn-primary" style="margin-left: 2rem; margin-top: 0.5rem">ログイン</a>
            </li>

        </ul>

        <!-- 右のボタン -->
        <ul class="navbar-nav mr-auto" style="margin-right: 4rem; margin-left: 2rem;">

            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                ドロップダウン
            </a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">アクション</a></li>
                <li><a class="dropdown-item" href="#">他のアクション</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">他の何か</a></li>
            </ul>
            </li>

        </ul>
    </div>
  </div>
</nav>