railsにtwitter bootstrap を導入

目的

railsにtwitterbootstrap（bootswatch）を入れること

ゴール

デフォルトページのレイアウトがbootswatchのflatlyになっている状態

動作環境

Rails 3.2.13

ruby 1.9.3p194
Mac OSX 10.8.2

手順

• railsプロジェクトbootswatch_testの作成

$ rails new bootswatch_test

$ cd bootswatch_test/

• scaffoldでページをつくる

$ rails g scaffold event name:string start_datetime:datetime end_datetime:datetime place:string content:text participation_limit:integer

$ rake db:migrate

• #Webサーバの起動

$ rails s

• bootswatch_test/Gemfileの設定

gem 'twitter-bootstrap-rails' #まずはこの行を追加

gem 'less-rails' #あとで必要と言われるのでこの行も追加

gem 'sass-rails',   '~> 3.2.3'

gem 'coffee-rails', '~> 3.2.1'

gem 'therubyracer', :platforms => :ruby #あとで必要と言われるのでこの行のコメントを外しておく

gem 'uglifier', '>= 1.0.3'

• Gemfileのインストール

$ bundle install

$ rails generate bootstrap:install

• layoutの作成（application.html.erbは既存なので上書き確認が出る）

$ rails g bootstrap:layout application fluid

• （wgetコマンドをMacPortでインストール）

$ sudo port install wget

• bootswatchのインストール

$ mkdir vendor/assets/stylesheets/bootswatch

$ wget -P vendor/assets/stylesheets/bootswatch　http://bootswatch.com/flatly/variables.less

$ wget -P vendor/assets/stylesheets/bootswatch http://bootswatch.com/flatly/bootswatch.less

• app/assets/stylesheets/bootstrap_and_overrides.css.less に以下を追加して、importする

@import "bootswatch/variables.less";

@import "bootswatch/bootswatch.less";

• 検証

localhost:3000/events

参考URL

http://inoccu.net/blog/2013/04/28/112225.html
http://qiita.com/items/260a930c5ff95aafebd1