Rails4へTwitter BootStrapの適用方法

bundleインストールを、そのアプリに対して行いたいので、事前準備とかしていますが、
特にその必要がないのであれば、本とかよく書いてる方法で問題ないです。

事前準備

ディレクトリの作成

Railsアプリ用のディレクトリ（例：silky）を作成し、Gemfileだけを作成します。

$ mkdir test1
$ cd test1
$ bundle init

Gemfileの編集

$ vi Gemfile

以下は必須となります。

• gem 'therubyracer', platforms: :ruby（有効化）
• gem 'less-rails' （追記）
• gem 'twitter-bootstrap-rails'（追記）

source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.7'

# Use sqlite3 as the database for Active Record
gem 'sqlite3'

# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.0'

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'

# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'

group :doc do
  # bundle exec rake doc:rails generates the API under doc/api.
  gem 'sdoc', require: false
end

# BootStarpで追加。
gem 'less-rails'
gem 'twitter-bootstrap-rails'

# Google Maps for Rails
gem 'gmaps4rails'
gem "geocoder"

# Use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.1.2'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

bundle installを実行する。

$ bundle install --path vendor/bundle

Railsアプリを準備する

$ bundle exec rails new . -T

GemfileはOverwriteしたくないので（ｎ）を選択する。

BootStrapのインストール

$ bundle exec rails generate bootstrap:install less

$ bundle exec rails generate bootstrap:install static

BootStrapをapplication.html.erbに適用する。

$ bundle exec rails g bootstrap:layout

layoutは指定可能だが、省略するとapp/views/layouts/application.html.erbに適用する。

テスト用にscaffoldする。

$ bundle exec rails g scaffold Post title:string description:text
$ bundle exec rake db:migrate

scaffoldで作成されたviewにBootStrapを適用する。

$ bundle exec rails g bootstrap:themed Posts -f

起動して確認する。

$ bundle exec rails s

ナビゲーションバーのかぶりを修正する。

最終行に追加する。

app/assets/stylesheets/bootstrap_and_overrides.css.less

/* universal */
html { overflow-y: scroll; }
body { padding-top: 60px; }
section { overflow: auto; }
textarea { resize: vertical; }
.center { text-align: center; }
.center h1 { margin-bottom: 10px; }

Webrickを一度止めて、もう一度起動して確認する。

$ bundle exec rails s