LoginSignup
22

More than 5 years have passed since last update.

Rails5アプリにBootstrap4を導入

Posted at

概要

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22