サイトアイコン Lonely Mobiler

Rails で Bootstrap を使用したフォームを生成するのに便利な Rails Bootstrap Forms

現在 Rails で Web サイトを開発中で HTML を記述するのに Twitter Bootstrap を使用している。フォームを作成する際に通常 Rails では form_for(@hoge) みたいな感じに記述すると思うが、ここに Bootstrap で使う class を組み込もうとすると一々指定しないといけなくて面倒くさい。

そこで Rails Bootstrap Forms を利用すると既存のものとほぼ同じように使うだけで Bootstrap が適応されるので手間が省ける。

https://github.com/bootstrap-ruby/rails-bootstrap-forms

インストールするには Gemfile に以下を追加、bundle install する。

gem 'bootstrap_form'

さらに、application.css に以下を追加する。

/* *= require rails_bootstrap_forms */

Rails Bootstrap Forms を使うには以下のように form_for と記述してあるところを bootstrap_form_for と書き換えるだけで良い。

<%= bootstrap_form_for(@user) do |f| %> <%= f.email_field :email %> <%= f.password_field :password %> <%= f.check_box :remember_me %> <%= f.submit "Log In" %> <% end %>

このように書けば label タグまで出力してくれてだいぶ手間が省ける。

label を好きに変更したい場合は以下の様な感じにする。

<!--ラベルの文字列の変更--> <%= f.email_field :email, label: "メールアドレス" %> <!--ラベルを非表示--> <%= f.email_field :email, hide_label: true %> <!--ラベルに使う class へ追加--> <%= f.email_field :email, label_class: "custom-class" %>

form_tag に対応する bootstrap_form_tag も使える。

<%= bootstrap_form_tag url: '/subscribe' do |f| %> <%= f.email_field :email, value: 'name@example.com' %> <%= f.submit %> <% end %>

フォームのレイアウトを変更する際は bootstrap_form_for に layout を指定する。

<!-- インラインフォーム --> <%= bootstrap_form_for(@user, layout: :inline) do |f| %> <% end %>

<!-- ホライゾンフォーム, カラムの大きさも指定できる --> <%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %> <% end %>

とりあえず利用したところをメモしておいた。標準の form_for と大体同じように使えるし、とくに難しいことはないだろうと思う。

Sponsored Link
モバイルバージョンを終了