tkymtk's blog

Ruby on Rails及びその周辺について調べたこと。Do whatever you want to do at your own pace.

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

フォームについて

間違いがあれば、ご指摘下さると幸いです。