みなさん、こんにちは。まどぎわです(._.)
最近、作成しているRailsアプリケーションにBootstrap4を導入してみたので、その手順をメモしておきますφ(..)
手順
環境情報
試した環境を下記に記述しておきます。
| gem | version |
|---|---|
| rails | 5.1.4 |
| bootstrap | 4.0.0 |
Gemのインストール
Gemfileに下記を追記し、bundle installを実行します。
gem 'bootstrap', '~> 4.0.0' gem 'jquery-rails'
ちなみに、sprockets-railsのv2.3.2.以上がインストールされている必要があります。
確認方法は下記の通りです。
$ bundle show |fgrep sprockets-rails * sprockets-rails (3.2.1)
application.js、application.cssの編集
application.jsは、下記のように編集します。
// 省略 //= require rails-ujs //= require jquery3 // 追記 //= require popper // 追記 //= require bootstrap-sprockets // 追記 //= require turbolinks //= require_tree .
application.cssは、application.scssにリネームし、下記のように修正します。
// 省略 *= require_tree . *= require_self */ @import "bootstrap"; // 追記
FontAwesomeのインストール
最後にIconを使用するためにFontAwesome(ver 4.7.0)を導入します。
下記のようにapplication.html.erbに追記すれば、OKです。
# haml = stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" # erb <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" %>
サンプル
参考資料
以上です。
