Rails TutorialのフォームをBootstrap3で書き換えた
変更点
span6 offset3
からcol-xs12 col-sm-6 col-sm-offset-3
に変更。- それぞれのインプット要素を
<div class="form-group">
で包む - インプット要素に
class: "form-control"
を指定 - ボタンのcssを、
btn-large
からbtn-lg
に変更。 - ついでに、フォームタグに
role="form"
を追加するためのオプションを指定。
ERB
<% provide(:title, 'Sign up') %> <h1>Sign up</h1> <div class="row"> <div class="col-xs12 col-sm-6 col-sm-offset-3"> <%= form_for @user, html: { role: "form"} do |f| %> <div class="form-group"> <%= f.label :name %> <%= f.text_field :name, class: "form-control" %> </div> <div class="form-group"> <%= f.label :email %> <%= f.text_field :email, class: "form-control" %> </div> <div class="form-group"> <%= f.label :password %> <%= f.password_field :password, class: "form-control" %> </div> <div class="form-group"> <%= f.label :password_confirmation, "Confirmation" %> <%= f.password_field :password_confirmation, class: "form-control" %> </div> <%= f.submit "Create my account", class: "btn btn-lg btn-primary" %> <% end %> </div> </div>
リンク
出典
Bootstrap3
フォームについて