Bootstrapの導入 - Githubissues

アプリにカルーセルを使用する為、 Bootstrapを導入してみたが、 CSSや画像の表示が上手くいかない。

導入の基本を学ぶために、メンターから教えて頂いた手順を実行していく。

BootstrapのJavascriptを読み込む必要がある。
BootstrapのCSSを読み込む必要がある。
それらを読み込んだ上で、各コンポーネントのHTMLを実行することができる。 コンポーネントはこちらのものです https://getbootstrap.jp/docs/4.3/components/alerts/

まずはjavascriptの導入から始める。下記のサイトをもとに、の直前に追記する。 https://getbootstrap.jp/docs/4.3/getting-started/introduction/

<!DOCTYPE html>
<html>
  <head>
    <title>Footomo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%# # initial-scaleでズーム倍率の初期値を設定する。initial-scale=1にすると拡大や縮小せずに見せる %>

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

  <body>
    <div id="wrapper">
      <%= render 'partial/navbar' if current_user %>

      <% if flash[:notice] %>
        <div class="alert alert-info">
          <%= flash[:notice] %>
        </div>
      <% end %>
      <% if flash[:alert] %>
        <div class="alert alert-danger">
          <%= flash[:alert] %>
        </div>
      <% end %>

      <div class="container">
        <%= render 'partial/carousel' %>
      </div>

      <div class="container">
        <%= yield %>
      </div>

      <%= render 'partial/footer' %>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Kotaro18 / footomo

Bootstrapの導入 #5