&tag(Rails4/Bootstrap); *目次 [#fdfd846d] #contents *関連ページ [#ja90a0ec] [[TwitterBootstrapWithRails]] *参考情報 [#bb976556] -[[Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法 | ユービックログ研究所:http://ubiqlog.com/archives/8749]] -[[Rails 4でRSpecとTwitter Bootstrap - tobioka.net - You Ain't Gonna Need It:http://tobioka.net/765]] *twitter-bootstrap-railsを使って導入 [#b38c3ce8] **Gemfileの編集 [#z023d628] -sass-railsをコメントアウト #gem 'sass-rails', '~> 4.0.2' -以下を追加 #pre{{ gem 'less-rails' gem 'therubyracer' gem 'twitter-bootstrap-rails' #gem 'execjs' }} ※lessうんたらのエラーがでた場合、次のようにしないとだめかも。 gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git' -bundle install実行 bundle install --path vendor/bundle **Bootstrapを使ったテンプレートの生成 [#h27f2de7] -rails gで生成する。 #pre{{ $ bundle exec rails g bootstrap:install $ bundle exec rails g bootstrap:layout application }} -この段階で一応Bootstrapスタイルが適用される。 **調整 [#o74e59f3] ***ナビゲーションバーがかぶるのを修正 [#yc91306b] -app/assets/stylesheets/bootstrap_and_overrides.css.lessを編集 #pre{{ @import "twitter/bootstrap/bootstrap"; body { padding-top: 60px; } @import "twitter/bootstrap/responsive"; }} *トラブルシューティング [#gee90148] **「cannot load such file -- sass 」 が表示された。 [#jdfe0e2b] -途中から、sassからlessに変更した場合?application.cssが以下のようになっているか確認。 #pre{{ /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the top of the * compiled file, but it's generally better to create a new file per style scope. * *= require bootstrap_and_overrides */ }}