[RoR]railsにbootstarpを導入したときの手順

概要

RubyOnRailsにCSS/jsフレームワークであるbootstrapを導入したときの手順

環境

Ruby 2.2.2
Rails 4.2.3

参考

• RailsにBootstrapデザインを適用する

• gem 'twitter-bootstrap-rails'　のgithub

前提

Railsアプリのプロジェクトを作成済み、scaffoldも実施ずみ

導入

1.必要なgemのインストール

プロジェクトDir/Gemfileを開き、以下を修正、追加

Gemfile

# See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
# less
gem 'less-rails'
# JavaScript engine
gem 'execjs'
# bootstrap
gem 'twitter-bootstrap-rails'

Gemfileを修正後、ターミナルで

cmd

bundle install  --path vendor/bundle

を実行

2.Railsプロジェクトに必要なファイルをインストール

ターミナルで

cmd

rails generate bootstrap:install less

を実行

3.Railsプロジェクトにbootstrapを適用させる

アプリのレイアウト(プロジェクトDir/app/views/layouts/application.html.erb)に適用させる

ターミナルで

cmd

rails generate bootstrap:layout application fluid
を実行

fluidでレスポンシブデザイン。

scaffoldで作成された各viewに適用させる
ターミナルで

cmd

rails generate bootstrap:themed XXX

を実行
XXXには適用させるmodel名