Bootstrapを使ってみよう！

Table of Contents

Boostrapの導入
ヘッダーとフッターの作成

Boostrapの導入

以下のコマンドを実行します。

$ yarn add jquery bootstrap@4.6.2 popper.js

config/webpack/environment.jsを編集。

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })@use '~bootstrap/scss/bootstrap';
)

app/javascript/stylesheetsフォルダを用意して,application.scssを作成します。

@use '~bootstrap/scss/bootstrap';

またapp/javascript/packs/application.jsに以下を追加します。

import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application";

app/views/layouts/application.html.erbも変更します。

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

ヘッダーとフッターの作成

長くなるのでheadとbodyの2つに分けてコードを載せます。

<head>
# 追加コード
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<head>

<body>
 <header class="bg-light border-bottom">
  <nav class="navbar navbar-expand-lg">
   <div>
    <a></a>
    <button>
     <span></span>
    </button>
    <div>
     <ul>
     <% if user_signed_in? %>
     <li>
      <%= link_to "マイページ" %>
     </li>
     <li>
      <%= link_to "投稿一覧" %>
     </li>
     <li>
      <%= link_to "ユーザー一覧" %>
     </li>
     <li>
      <%= link_to "ログアウト" %>
     </li>
     <% elsif admin_signed_in? %>
     <li>
      <%= link_to "投稿一覧" %>
     </li>
     <li>
      <%= link_to "ユーザー一覧" %>
     </li>
     <li>
      <%= link_to "ログアウト" %>
     </li>
     <% else %>
     <li>
      <%= link_to "Top" %>
     </li>
     <li>
      <%= link_to "About" %>
     </li>
     <li>
      <%= link_to "新規登録" %>
     </li>
     <li>
      <%= link_to "ログイン" %>
     </li>
     <% end %>
     </ul>
    </div>
   </div>
  </nav>
 </header>
 <main>
 <%= yield %>
 </main>
 <footer>
  <div>
   <div>
    <p>footerです</p>
   </div>
  </div>
 </footer>
<body>

解説

bg-light : 背景を薄い灰色にする
border-bottom : 領域の下に線を引く
navbar : ナビゲーションの領域を作成する
navbar-expand-(ポイント) : 画面幅に応じてメニューを変化させる. その場所をポイントとして指定する。
navbar-(色) : ナビゲーションの色指定
p : paddingの指定
navbar-toggler : ナビゲーションのメニューの枠を作成
navbar-nav : ナビゲーション用の調整
ml-auto : 左側に余白を自動作成→今回の場合は右寄せになる