TwitterBootstrapのテーマをRailsアプリに適用する

Rails

環境

twitter-bootstrap-rails (2.1.7)
rails (= 3.2.6)
less-rails (2.2.6)
ruby 1.9.3p194

bootstrapテーマは以下とかからダウンロードできます。よく見ていませんが有料もあるようですが無料もあります。
http://getkickstrap.com/

テーマをダウンロードする

好きなテーマを決めたらダウンロードする。

ダウンロードするとzipになってるので解凍する。
解凍すると以下のファイルが出てくる。

bootswatch.less
variables.less

テーマを適用する

これらのlessファイルをAPP_ROOT/app/asset配下に置く。

次は、APP_ROOT/app/assets/stylesheets/bootstrap_and_overrides.css.lessに以下のimport文を追加。

@import "../bootswatch.less";
@import "../variables.less";

追加後のbootstrap_and_overrides.css.lessはこんな感じ。

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

@import "../bootswatch.less";
@import "../variables.less";

// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
@iconWhiteSpritePath: asset-path("tw
......

テーマを適用したページ


ダウンロードしたlessファイルを、なんでstylesheets配下におかないのかについては以下の記事で解説しています。
http://rainbowdevil.jp/?p=1138

関連記事

Twitter Bootstrapのテンプレート、カラーテーマなどをカスタマイズできるサービス
http://matome.naver.jp/odai/2133721441789659601