[初心者]Rails6にbootstrap4を導入する

Ruby on railsを学び始めて約2ヶ月、
初めてbootstrapを導入したので、記事を作ってみました。

---

環境

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.14.6
BuildVersion:	18G95

$ ruby -v
ruby 2.6.1p33 (2019-01-30 revision 66950) [x86_64-darwin18]
$ rails -v
Rails 6.0.0

---

目次

1. bootstrapのgemを追加
2. applicationファイルを編集
3. index.html.erbを編集
4. bootstrapが導入されているかを確認

---

1.bootstrap gemを追加

Gemfileに以下を追加

Gemfile

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

terminalでbundle installを実行
(ローカルでgemを管理している場合は、bundle install --path=vendor/bundleで実行)

これで、プロジェクト内にbootstrapのgemが追加されました。

2.applicationファイルを編集

2.1 application.cssの編集

app>assets>stylesheets>application.cssをエディタで開き、@import "bootstrap";を追加

application.css

~
@import "bootstrap";
~

次に拡張子を.cssから.scssへ変更
application.css → application.scss

2.2 application.jsの編集

app>assets>javascript>application.jsをエディタで開き、//= require bootstrapを追加
(フォルダ、ファイルがなければ作成)
bootstrapはjqueryとpopperに依存しているらしいので導入

application.js

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

3.index.html.erb を編集

適当なcontrollerに以下のコードを追加
app>assets>views>コントローラ名>index.html.erb
このコードはbootstrapのサイトにあるテストコードです。

index.html.erb

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

4.動作確認

下準備は整いました。

bundle exec rails sでローカルにサーバーを立ち上げます。
ブラウザにlocalhost:3000/コントローラ名/indexを入力し、画面を確認してください。
以下の表示になっていれば完了です。