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内ののラベルと入力欄を横並びにする
(1)
そのためにはform_forを、<div class=”form-horizontal” role=”form”>~</div>で囲ってあげる
つまりこんな感じ。
<div class="form-horizontal" role="form"> <%= form_for(@person) do |f| %> ~~ <% end %> </div>
(2)
さらにラベルと入力欄を<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>
(3)1と2を合わせた完成形
<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