simple_formでTwitter Bootstrap 3.0に対応したフォームを書く[Rails 4]

Rails 4やBootstrap 3.0を使っているとWebの進化の速さを感じますね＾＾、ということで相変わらずドハマり中なのですが、とりあえずRailsでフォームを簡単に作れるgem simple_formをTwitter Bootstrap 3.0に対応させるときの忘備録記事です。もしこのあたりでハマった方がいればぜひ情報共有したいのでコメントくださいまし！

🍣 まえおき

今回は、simple_formの導入に関しては割愛します。githubのREADMEが超わかりやすいので良かったら読んでみてください。

🐯 Bootsrap 3.0に対応させるときに書き換えておきたい場所

基本的には、Bootstrap 3 compatibility · Issue #857 · plataformatec/simple_form内のコメントから引っ張ってきました。もし別の方法があったり、勘違いしている部分があればぜひコメントよろしくお願いします！

config/initializer/simple_form_bootstrap.rbを次のようにアップデート。

config.wrappers :bootstrap, :tag => 'div', :class => 'form-group', :error_class => 'has-error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label
  b.use :input, :wrap_with => { :tag => 'div', :class => 'controls col-xs-12 col-sm-12 col-md-12 col-lg-12' }
  b.use :error, :wrap_with => { :tag => 'span', :class => 'help-block' }
  b.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
end

あとは、config/initializer/simple_form_bootstrap.rbの最後の方にも次の内容を追加。

config.form_class = "form-horizontal"
config.label_class = "col-xs-12 col-sm-12 col-md-12 col-lg-12 control-label"
#config.input_class = "form-control" #not yet supported
config.default_wrapper = :bootstrap

あとはHAML側に以下を追加。

= simple_form_for ... :defaults => { :input_html => { :class => "form-control" } } do |f|

これでTwitter Bootstrap 3.0のデザインを適用したフォームを作成することができました。

🐠 参考リンク

Bootstrap 3 compatibility · Issue #857 · plataformatec/simple_form

CSS · Bootstrap 3.0

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍