Ruby on Railsアプリでブートストラップ3を利用する手順をまとめました。
1)アプリケーション作成
ここでは、新規に”btstrp”という名前のアプリを作成しています。
$ rails new btstrp
2)Gemfileを修正
$ cd btstrp
$ vi Gemfile
gem ‘bootstrap-sass’, ‘~> 3.3.1’
gem ‘sass-rails’, ‘>= 3.2’
gem ‘autoprefixer-rails’
※下記JavaScriptランタイムのコメントを削除して有効にします。
gem ‘therubyracer’, platforms: :ruby
3)バンドルインストール
$ bundle install
4)コントローラとビューを作成
ここでは、”StaticPages”という名前のコントローラと”home”という名前のアクションを作成します
$ rails generate controller StaticPages home
5)config/application.rbに設定追加
$ vi config/application.rb
下記設定を追加します
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
6)カスタムCSSを追加
①カスタムCSS用のファイルを追加
“app/assets/stylesheets/”ディレクトリに”custom.css.scss”という名前のファイルを作成
②Bootstrapをインポート
すべてのブートストラップスタイル、ミックスイン、変数を取得するためにSCSSファイル内にBootstrapをインポートします。
“custom.css.scss”ファイルに下記のように記述します。
@import “bootstrap-sprockets”;
@import “bootstrap”;
7)動作確認
①ビューの”home”にブートストラップのサイトから入手したoffcanvasのサンプルページのHTMLコードをコピーします。
http://getbootstrap.com/examples/offcanvas/
②http://localhost:3000/static_pages/homeにアクセスし、正常にレイアウトされて表示されることを確認します。