【Rails】Bootstrap 4(alpha)をインストール

Railsにbootstrapを導入する際、bootstrap3ではbootstrap-sassgemを使っていたが、

This is Bootstrap 3. For Bootstrap 4 use the Bootstrap Ruby gem if you use Ruby, and the main repo otherwise.

4を使いたかったらbootstrapgemを使ってね、とのことらしい

インストール

Gemfileに次のように記述してbundle install

gem 'bootstrap', '~> 4.0.0.alpha4'

app/assets/stylesheets/application.scssが存在することを確認。もしapplication.cssだったりしたらリネームしましょう。

app/assets/stylesheets/application.scssの末尾に次の行を追加

application.scss

@import "bootstrap";

app/assets/javascripts/application.jsに次の行を追加

application.js

//= require jquery
//= require bootstrap-sprockets

bootstrapを利用するページのhtml.erbのheadタグ内に次のように記述(app/view/layouts/application.html.erbとかに書くと良さそう)

application.html.erb

<%= csrf_meta_tags %>
<meta  name="viewport" content="width=device-width">
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

おまけ variablesの変更

@import 'bootstrap'を呼び出す前に変数を定義しておくと、その変数で上書きされるようです。

試しにこの青色のボタン(btn-primary)を桃色にしてみます。

<div class="btn btn-primary">ぼたん</div>

app/assets/stylesheets/application.scssの@import 'bootstrap'の前に一行追加してみます。

application.scss

$brand-primary: #e87070 !default;
@import 'bootstrap'

とても桃になりました。

参考: http://qiita.com/tonkotsuboy_com/items/1855734522bfe7ef7dad