Bootstrap3をRails4に導入

1年くらい前に書いた記事ですが、お蔵入りさせるのも何なので公開します。実は先程新しいプロジェクトでもやって違うところがないか確認もしたので2017年現在でも有効じゃないかと思います。

Bootstrap導入するのに結構ハマりました。実際両方の方法を試しました。
最新はBootstrap4だけどα版のため現時点（2016年7月時点）では3が無難。
あと、世にある導入方法の殆どがscaffoldでまず何らかの雛形作らせるんだけど、当然読み飛ばしています。

Gemを使う

以下はBootswatchをインストールする例だが、これだけだと動かない可能性あり、並行して手動のものもやってみました。
イイ感じのテンプレートができるとか言う有名なサンプルサイトはこちら。
http://bootswatch.com/
Rubyといえばお馴染みのこちらを参照。
http://dev.classmethod.jp/server-side/ruby-on-rails/ruby-on-rails_bootstrap3_sample/

Gemfile

# 以下はお約束みたいなのでとりあえず入れる
gem ‘therubyracer’            # javascript runtime。lessをコンパイルするために必要
gem ‘less-rails’              # Railsでlessを使えるようにする。Bootstrapがlessで書かれているため

# Twitter Bootstrap
gem 'twitter-bootswatch-rails', '~> 3.1.1'
gem 'twitter-bootswatch-rails-helpers'

bundle install


rails g bootswatch:install flatly
rails g bootswatch:import flatly
rails g bootswatch:layout flatly

-> view/layoutにファイルができるので（flatly.html.slim）
それをapplication.html.slimによしなにコピーする。
ちなみに設定してあるテンプレートの形に作ってくれるのでslimでもhaml（多分）OK。

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( flatly.css )
Rails.application.config.assets.precompile += %w( flatly.js )

手作業によるインストール

以下丸パクリだけど上記と合わせると何故か動作した。こちらを参照。
http://dev.classmethod.jp/server-side/ruby-on-rails/ruby-on-rails_bootstrap3_sample/

• Bootstrap本家サイト（http://getbootstrap.com/getting-started/）から bootstrap-3..-dist.zip をDL
• 展開する
  • fonts vender/assets/にフォルダ毎コピー
  • css vender/assets/stylesheet/に、中にある.cssファイルをコピー
  • js vender/assets/javascript/に、中にある.jsファイルをコピー

• app/assets/stylesheets/application.css に以下を追加
  *= require bootstrap


• app/assets/javascripts/application.js に以下を追加
  //= require bootstrap


• config/application.rb の「class Application < Rails::Application」の中に以下を追加
  config.assets.paths << "#{Rails}/vender/assets/fonts"


パット見綺麗になりましたが、ここからレイアウトする必要あり。頑張ります。