Material Design for Bootstrap を Rails4で使う

Material Design for BootstrapをRails4で使う設定のメモです。

必要なGem。

Gemfile

gem 'jquery-rails'
gem 'bootstrap-sass'
gem 'bootstrap-material-design'

Material Design for Bootstrap を Bootstrap の後に読み込む必要があるので、 require_self を使って bootstrap-material-design より先に bootstrap-sass をインポートします。

application.css.scss

//= require_self
//= require bootstrap-material-design

@import 'bootstrap-sprockets';
@import 'bootstrap';

Turbolinks で page:load が発火されたタイミングで $.material.init(); を実行します。

application.js

//= require jquery2
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-material-design
//= require bootstrap-sprockets

$(document).on('ready page:load', function() {
  $.material.init();
});