Tag: Rails4/Bootstrap

目次

関連ページ

TwitterBootstrapWithRails

参考情報

bootstrap-sassを使って導入

概要

Gemfileの編集

  • Gemfileに追加。
    gem 'bootswatch-rails', '~> 3.2.4'
    gem 'font-awesome-sass'
    
  • bundle installを実行
    bundle install --path vendor/bundle

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メッセージが表示されない


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-04-13 (水) 16:47:37