2012年9月5日水曜日

RailsアプリでTwitter Bootstrapを利用する

既存のRailsアプリにTwitter Bootstrapを対応させる場合の注意点のまとめです

環境

Twitter Bootstrap v2.1, ruby-1.9.3-p0, rails3.2.2, postgresです。

既存のRailsアプリにTwitter Bootstrapを対応させる場合、新しい画面モックをhtmlで作成してviewだけ変更するのが基本になると思います。
以下、使用方法のメモです。

bootstrap.jsをデフォルトで読み込むようにする

Twitter Bootstrapを正常に動作させるにはbootstrap.jsが必要です。
<%= javascript_include_tag :defaults %>でjavaScriptタグが出力できるようにapplication.rbに以下のように設定します。


config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs)

↓

config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs bootstrap)

classの指定

cssを適用させるにはclass属性を利用します。各タグに:classを付加して指定することになります。

文字列中にタグ文字を追加

railsのタグは特殊文字をエスケープします。タグ文字を利用したい場合はHelperメソッドを自分で作成して対応します。
link_toの場合はブロックを利用した記述で対応できます。


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...