22
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

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

これで完了。

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

Screen Shot 2017-06-08 at 18.07.27.png

いじっていくコード。

<% @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">

Screen Shot 2017-06-08 at 18.20.07.png

どうやら、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が反映されている!

Screen Shot 2017-06-08 at 18.28.19.png

今日はここまで。

参考資料

Bootstrap Ruby Gem
Bootstrap Download

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
22
Help us understand the problem. What are the problem?