jQuery
RubyOnRails
Bootstrap3
YARN

RailsへのBootstrap導入でやったことメモ

導入環境

Rails 5.1.5

Ubunts 14.04.5

事前準備

railsのアプリを作成、基本的なブログ機能を構築済み

jQueryのインストール

  1. https://yarnpkg.com/lang/en/ からYarnをダウンロードし、インストール
  2. yarn add jqueryでjqueryをインストール
  3. RailsでjQueryを読み込むためにマニフェストファイルにjqueryのパスを追加
app/assets/javascript/application.js
~省略~
//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery.js //node_modules内にあるこの行を追加
//= require_tree .

bootstrapの3系をインストール

1.yarn add bootstrap@3でbootstrapをインストール
2. Railsでbootstrapを読み込むためにcssのマニフェストファイルにbootstrapのパスを追加

app/assets/stylesheet/application.css
/*
~省略~
*= require bootstrap/dist/css/bootstrap.min この行を追加
*= require_tree .
*= require_self
*/
  1. Railsでbootstrapを読み込むためにjavascriptのマニフェストファイルにbootstrapのパスを追加
app/assets/javascript/application.js
~省略~
//= require rails-ujs
//= require turbolinks
//= require bootstrap/dist/js/bootstrap.min //この行を追加
//= require jquery/dist/jquery.js 
//= require_tree .

これで導入は完了、後はindex.html.erbなりにclassタグを指定して実践あるのみ