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

Programming

2016.01.182017.06.03

現在 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 と大体同じように使えるし、とくに難しいことはないだろうと思う。

開発したアプリなど一覧

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

コメント