RailsでBootstrapを使用するには、twitter-bootstrap-rails gem を使用します。
twitter-bootstrap-railsのドキュメント：https://github.com/seyhunak/twitter-bootstrap-rails
step1. gemの導入
gemfileを開き、twitter-boostrap-railsを追加します。同時にJavaScript用のtherubyracerと、Less形式のスタイルシートを扱うためのless-railsを追加します。
# gemfile gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails'
gem をインストールします。
$ bundle install
step2. bootstrapの導入
bootstrapをRailsのassetsに追加します。
$ rails generate bootstrap:install less
次のようにリソース類が生成されます。app/assets/stylesheetsに新しいcssが生成されていますが、これによりBootstrapのスタイルが適用されます。
Running via Spring preloader in process 15348 insert app/assets/javascripts/application.js create app/assets/javascripts/bootstrap.js.coffee create app/assets/stylesheets/bootstrap_and_overrides.css.less create config/locales/en.bootstrap.yml gsub app/assets/stylesheets/application.css
ブラウザでサイトを確認し、表示されることを確認します。
！次のようなメッセージが表示された場合は、app/assets/application.cssをapplication.css.scssにリネームし、ウェブサーバーを再起動します。
couldn't find file 'twitter/bootstrap' with type 'application/javascript'step3. 基本レイアウトの作成
Bootstrap:layout で基本となるレイアウトを作成できます。app/views/layouts/application.html.erbが上書きされます。
$ rails generate bootstrap:layout
上だとデフォルトレイアウトになりますが、下はレイアウトを指定しています。
$ rails generate bootstrap:layout apprication fluid
step4. さて次は
次は上で作成した共通レイアウトのapp/views/layouts/application.html.erbや個別のCSSを自由に改定するわけですが、基本的にBootstrapは適切なクラス名を付けることで動作します。
公式ドキュメントを参照してチャレンジします。
グリッドシステム周りは、http://getbootstrap.com/2.3.2/scaffolding.html。
基本的なCSSについては、http://getbootstrap.com/2.3.2/base-css.html。