Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away