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

4666 ワード
Ruby Rails bootstrap4 Ruby テキストリンク

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を入力し、画面を確認してください。
以下の表示になっていれば完了です。