search
LoginSignup
135

More than 5 years have passed since last update.

posted at

updated at

Organization

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

対象となる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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
135