Railsの調べ物をしていてうまく出来たのでメモとして残しています。
以下のようなnewとeditのフォーム部分でBootstrapを使って見た目を綺麗にしていきます。
<%= form_for(@task) do |f| %>
<%= f.label :age, '年齢' %>
<%= f.select :age,["20代", "30代", "40代", "50代", "60代" ] %>
<%= f.submit '登録' %>
<% end %>
formのselectにbootstrapを適用して綺麗にする
まずclassでcontrol-labelを適用するダケで綺麗になるけど、以下の文だと何故かselectの方がうまく適用されない。
<%= f.label :age, '年齢', class:'control-label' %> <%= f.select :age, ["20代", "30代", "40代", "50代", "60代" ], class: 'form-control' %>
で、APIリファレンスを読んだりしてもわからなくて。WEB上をあちこち調べまくってselectメソッドの3個目の引数に{}を入れると何故かうまくいきました。
<%= f.label :age, '年齢', class:'control-label' %>
<%= f.select :age, ["20代", "30代", "40代", "50代", "60代" ], {}, class: 'form-control' %>
これはこういうものだと覚えておかないと。
form_for内ののラベルと入力欄を横並びにする
（１）
そのためにはform_forを、<div class=”form-horizontal” role=”form”>～</div>で囲ってあげる
つまりこんな感じ。
<div class="form-horizontal" role="form"> <%= form_for(@person) do |f| %> ～～ <% end %> </div>
（２）
さらにラベルと入力欄を<div class=”form-group”>～</div>で囲う。これで1行になる。
そして横並びにするには、ラベルと入力欄にグリッドを適用するので、ラベルは<div class=”col-xs-2″></div>で囲ってあげて2マス分確保、入力欄は<div class=”col-xs-10″></div>で囲って10マス分確保してあげる。（横幅いっぱいになっちゃうけど）
<div class="form-group">
<div class="col-xs-2">
<%= f.label :age, '年齢', class:'control-label' %>
</div>
<div class="col-xs-10">
<%= f.select :age, ["20代", "30代", "40代", "50代", "60代" ], {}, class: 'form-control' %>
</div>
</div>
（３）１と２を合わせた完成形
<div class="form-horizontal" role="form">
<%= form_for(@person) do |f| %>
<div class="form-group">
<div class="col-xs-2">
<%= f.label :age, '年齢', class:'control-label' %>
</div>
<div class="col-xs-10">
<%= f.select :age,["20代", "30代", "40代", "50代", "60代" ], {}, class: 'form-control' %>
</div>
</div>
<%= f.submit '登録' %>
<% end %>
</div>
参考にさせていただいたサイト
https://sites.google.com/site/rubyonrailsapps/view_tips/railsnoformwobootstrapde-shi-zhuangsurutoki
Bootstrapとフォームタグの使い方いろいろ
https://qiita.com/zaburo/items/8983993d173c51cb3827
https://qiita.com/uedatakeshi/items/ef8682956f956040bfce
