Rails 4 で Twitter Bootstrap 3 を利用する方法

[rails] Rails 4 で Twitter Bootstrap 3 を利用する方法

bootstrap-sass を取得

rails 4 が sass なので、bootstrap も sass のを使うことにする。
利用したのは、https://github.com/thomas-mcdonald/bootstrap-sass

10/10時点では、bootstrap-sass は、Gme でインストールしたら、 Bootstrap 2.X になってしまったので、
github より、最新の3.0対応版を持ってくる。

$ curl -L -O https://github.com/thomas-mcdonald/bootstrap-sass/archive/master.zip

$ unzip master.zip

rails のプロジェクト配下にコピー

unzip した、bootstrap-sass の vender 以下のファイルを アプリケーションの vendor/assets にコピーする。

$ cp -r bootstrap-sass-master/vendor/assets (アプリケーショントップ)/vendor/

# fonts/ javascripts/  stylesheets/ がコピーされる。

application.css, application.js から require する。

vender/assets にコピーした、bootstrap-sass を requre するために、
application.js, application.css を編集する。

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index d6925fa..cd5c291 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,4 +13,5 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
+//= require bootstrap
 //= require_tree .
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 3192ec8..568f569 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -8,6 +8,15 @@
  * 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
  *= require_self
  *= require_tree .
  */

view を編集

app/views/layouts/application.html.erb などを twitter bootstrap っぽいのに変更。