개요

Rails5에서 또는 Bootstrap4를 설치하고 시도한 적이 없었기 때문에 시도해 보겠습니다. Rails5 환경입니다.

절차

아래 링크에 따라 진행합니다.
부트스트랩 루비 젬

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 Download