Rails
bootstrap

RailsアプリにBootstrapを適用させる

More than 3 years have passed since last update.

対象となるgemのインストール

Gemfileに以下を追記する

gem "therubyracer"

gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

・twitter-bootstrap-railsはLESSを使用するため、therubyracerが必須

・LESSのスタイルシートを使うにはless-railsというgemが必要

・JavaScriptのエンジンであるv8*3をRubyから使えるようにするgem (謎)

ということで上記3つのgemを入れます。

追記し終わったらgemの更新


$ bundle install


それが終わったらbootstrapジェネレータを使ってassetsへincludeファイルをインストール


$ rails generate bootstrap:install less


続いてlayoutファイルの生成


rails generate bootstrap:layout application fixed


レスポンシブデザインに対応させたいときはこっちのコマンド


rails generate bootstrap:layout application fluid



注意

layoutにtwitter-bootstrapを反映させることでfavicon_link_tagが挿入されるのでこのままdeployするとfavicon_link_tagがないことでassets_precompileの段階でエラーが起きます。

deployするときはlayoutからfavicon関連を削除してください。


デザイン

bootstrap公式ページ(http://bootswatch.com/) から

気に入ったのを選び、variables.lessをbootstrap_and_overrides.css.lessへ追記すればデザインが変更できます。


参考

・Twitter Bootstrap for Rails 3.1 Asset Pipeline https://github.com/seyhunak/twitter-bootstrap-rails

・twitter-bootstrap-rails ことはじめ

http://qiita.com/items/7b7e5934004a49591ed8