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の場合はブロックを利用した記述で対応できます。

---

参考サイト

• ActionView::Helpers::UrlHelper
• link_toにHTMLタグを含む文字列を指定する方法

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

Tweet