[Rails4]Bootstrap3のBootstrap!

Rails4.0系で Twitter Bootstrap3を使ってみる


たまにはまともなネタを...


環境


ruby 2.1.1p76 (2014-02-24 revision 45161) [x86_64-darwin13.0]
Rails 4.0.4

Gemfileの準備


以下を追加して、bundle installを実行します。


gem 'bootstrap-sass', '~> 3.1.1.0'
gem 'bootstrap_form', git: 'git@github.com:bootstrap-ruby/rails-bootstrap-forms.git'

※bootstrap_formのv2.0.1だと、できないことが結構あるので、最新を使ってます。(製品ではまだ使わないように!)

application.css.scssに以下を追加します


@import "bootstrap";
@import 'bootstrap/theme';
@import 'rails_bootstrap_forms';

application.jsを以下のようにします。


//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

任意のフォームを以下のようにします。


<%= bootstrap_form_for(@member, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %>
<%= f.text_field :name %>
<%= f.collection_select :prefecture_id, Prefecture.select('id, name').all, :id, :name, control_col: 'col-sm-6' %>
<%= f.email_field :email, control_col: 'col-sm-8' %>
<%= f.date_field :birthday, control_col: 'col-sm-6' %>
<%= f.collection_check_boxes :hobbies, Hobby.all, :id, :name, inline: true %>
<%= f.form_group do %>
<%= f.submit %>
<% end %>
<% end %>

できあがりー
blog-173-01.png
何がうれしいって、面倒な、.checkbox-inlineとかが

f.collection_check_boxes :hobbies, Hobby.all, :id, :name, inline: true
みたいに簡単にかけることなんだよね。
inline: trueを外せば、縦方向にも並びますー
ぜひ色々とお試しあれ!


Links


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


スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。