Rails4/Bootstrap の履歴(No.5)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails4/Bootstrap へ行く。
  • 1 (2014-05-01 (木) 02:34:29)
  • 2 (2014-05-01 (木) 03:00:24)
  • 3 (2014-06-12 (木) 08:55:37)
  • 4 (2014-06-13 (金) 04:56:34)
  • 5 (2014-06-13 (金) 08:33:09)

Tag: Rails4/Bootstrap

目次†

関連ページ†

TwitterBootstrapWithRails

参考情報†

• Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法 | ユービックログ研究所
• Rails 4でRSpecとTwitter Bootstrap - tobioka.net - You Ain't Gonna Need It

twitter-bootstrap-railsを使って導入†

Gemfileの編集†

• sass-railsをコメントアウト

  #gem 'sass-rails', '~> 4.0.2'

• 以下を追加

  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を使ったテンプレートの生成†

• rails gで生成する。

  $ bundle exec rails g bootstrap:install
  $ bundle exec rails g bootstrap:layout application
  

• この段階で一応Bootstrapスタイルが適用される。

調整†

ナビゲーションバーがかぶるのを修正†

• app/assets/stylesheets/bootstrap_and_overrides.css.lessを編集

  @import "twitter/bootstrap/bootstrap";
  body {
    padding-top: 60px;
  }
  @import "twitter/bootstrap/responsive";
  

トラブルシューティング†

「cannot load such file -- sass 」　が表示された。†

• 途中から、sassからlessに変更した場合?application.cssが以下のようになっているか確認。

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

エラーメッセージの色などがかわらない†

• bootstrap_and_overrides.css.lessに追加

  #error_explanation {
    .alert();
    .alert-error();
    .alert-block();
  }
  
  .field_with_errors {
    .control-group.error();
  }
  

bootstrap_flashメッセージが表示されない†

• The helper bootstrap_flash not working in Rails 4.1.0 stable · Issue #721 · seyhunak/twitter-bootstrap-rails 直接指定。