Rails5アプリにBootstrap4を導入

#概要
Rails5でというかBootstrap4をインストールして試したことがなかったので試してみる。Rails5の環境です。

#手順

下記のリンクにしたがって進めて行く。
Bootstrap Ruby Gem

gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'

app/assets/stylesheets/application.scss

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

Rails5.1ではjquery-railsが必要なようなのでGemを追加して、bundle installする。

gem 'jquery-rails'

$ bundle install

application.jsに下記の3つを追加する。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

これで完了。

ついでに表示がイマイチなウェブページを直してみる。現状はこんな感じ。

いじっていくコード。

<% @records.each do |r| %>
  <%if r.user_id == current_user.id %>
    <table>
      <tr>
        <th>日付</th>
        <th>ユーザーID</th>
        <th>出勤時間</th>
        <th>退社時間</th>
      </tr>
      <tr>
        <td><%= r.timein.strftime('%m月%d日') %></td>
        <td><%= r.user_id %></td>
        <td><% if r.timein.present? %><%= r.timein.strftime('%H:%M:%S') %><% else %>まだ<% end %></td>
        <td><% if r.timeout.present? %><%= r.timeout.strftime('%H:%M:%S') %><% else %>まだ<% end %></td>
      </tr>
    </table>
  <% end %>
<% end %>

試しにtableにクラスをつけてみる。特に変化がない。

<table class="table table-striped">

どうやら、assetsでbootstrapが呼ばれていない様子。

原因はapplication.scssファイル。指示通りにファイルを消さないでいたことが原因。

#application.scss　変更前

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self

 * // Custom bootstrap variables must be set or imported **before* bootstrap.
 *@import "bootstrap";
 */

#application.scss　変更後

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

変更後、ブラウザで確認してみると確かにbootstrapが反映されている！

今日はここまで。

#参考資料
Bootstrap Ruby Gem
Bootstrap Download