Rails4/Bootstrap の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Rails4/Bootstrap へ行く。
• Rails4/Bootstrap の差分を削除

&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]]

*bootstrap-sassを使って導入 [#a5457844]
**概要 [#nd4589d1]
-bootstrap3を入れる場合、bootstrap-sassというのを使ったほうがいいらしい。
-[[bootstrap-sass という gem について - willnet.in:http://www.willnet.in/136]]
-[[Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入 | EasyRamble:http://easyramble.com/bootstrap-sass-on-rails4.html]]
-[[Rails 4 で Twitter Bootstrap と Font Awesome を利用する手順 - Qiita:http://qiita.com/hkusu/items/a549a96dcb2bb935a47b]]


**Gemfileの編集 [#q9863aaa]
-Gemfileに追加。
#pre{{
gem 'bootswatch-rails', '~> 3.2.4'
gem 'font-awesome-sass'
}}
-bundle installを実行
 bundle install --path vendor/bundle



*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
 */

}}

**エラーメッセージの色などがかわらない [#c4937038]
-bootstrap_and_overrides.css.lessに追加
#pre{{
#error_explanation {
  .alert();
  .alert-error();
  .alert-block();
}

.field_with_errors {
  .control-group.error();
}
}}

**bootstrap_flashメッセージが表示されない [#c39edece]
-[[The helper bootstrap_flash not working in Rails 4.1.0 stable · Issue #721 · seyhunak/twitter-bootstrap-rails:https://github.com/seyhunak/twitter-bootstrap-rails/issues/721]] 直接指定。