はじめに

今回はRuby on RailsでBootstampを使用する方法について書かせていただきます。
BootstampやRuby on Railsについては下記のHPをご覧いただければと思います！

（こちらの記事ではrailsのインストール方法などは割愛させていただきます）

・Bootstampについて
https://getbootstrap.jp/docs/5.0/getting-started/introduction/

・Ruby on Railsについて
https://railsguides.jp/

開発環境

Bootstamp バージョン５
Ruby on Rails バージョン2.6.5

使用するための準備

①Railsをインストール後、テキストエディタを開き下記のファイルを開く

app / views / layouts / application.html.erb

②application.html.erbを開くと元から下記のように記述があるのを確認する

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>アプリ名</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

③Bootstampを使用するために下記の二つの記述を追加する
⑴ headタグの中にBootstampのための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">

⑵bodyタグ内にBootstampのJavaScriptを読み込むための記述

<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>

※こちらは <%= yield %> の下に記述をする

完成形

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>アプリ名</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    ※追加
    <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">

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>

　　※追加
    <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>

  </body>
</html>

これで問題なく、Bootstampが動きます！

【 Bootstanp 】Ruby on RailsでBootstampを使用する方法

はじめに

開発環境

使用するための準備

完成形