Rails5 ✕ Bootstrap4

おつかれさまです。

メモです、Rails5にBootstrap4を導入します。

Bootstrapとは、ページのデザインを簡単にしてくれる強力アイテム、みたいなものです。Bootstrapを導入するとCSSの編集が必要なくなります、ちゃうか、極力編集しなくてもすみます。

あらかじめ編集されたCSSをインストールしておいて、ねらいのデザインに適応したCSSをHTMLのクラス名で呼び出す、という仕組みです。

こちらもいろいろバージョンがあり、今回最新版のBootstrap4をインストールします。

インストールにはいろいろ方法がありますが、今回はGemでパッケージされたものをインストール、

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

$ bundle install

ここまで忘れずに。

次に、application.cssをapplication.scssにリネーム、scssはcssのスーパーサイヤ人みたいなものです。

そのまま、application.scssの内容をいったん全て消去して、下記コードを追記します。

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

これでapplication.scssの編集は完了。

次に、application.jsのファイルを編集します。jsはJavaScriptの略です、ちょっと誰ですか、女s…(ry

このファイルに下記コードを追記します、こちらの内容は消去しません、そのまま追記です。

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

これでいけたかな！