Question

说我有这个基本的formhelper代码：

 <%= form_for(@user) do |f| %>

      <%= f.label :name, 'Username' %>
      <%= f.text_field :name %>

      <%= f.label :email, 'Email (Optional)' %>
      <%= f.text_field :email %>

      <%= f.label :password %>
      <%= f.password_field :password %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>

      <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
    <% end %>

我知道我可以通过向form_for参数添加:html => { :class => "class_name"}来更改整个事物的类，但是如果我想将每对控件放在form-group类中，然后呢？标签是否为control-label类，输入是否为form-control类？因为这是引导程序同意为我设计表单的唯一方法。我试着在标签和文本字段周围抛出HTML代码，但这是一个怪物。我想知道是否有更清洁的方法。

inb4表单构建器宝石，我在这里学习，并且我继续读到有关rails 4和bootstrap 3的那些仍然有点缺乏

Answer 1

显然，您也可以在表单控件ruby命令上执行:class => "classname"作为属性。比无穷无尽的嵌套div更难看。

Answer 2

下面使用Rails语法在Bootstrap中格式化表单的正确方法。乍一看似乎没必要，但div.form-group有助于在每对之间添加一点保证金，并为您提供添加validation classes的父级。

.control-label通常是不必要的，但如果您要添加这些验证类，如果您希望它们更改颜色，则需要将其添加到标签中。 :class => 'control-label'上的f.label是您添加这些内容的方式。

<%= form_for(@user) do |f| %>
  <div class="form-group">
    <%= f.label :name, 'Username' %>
    <%= f.text_field :name, :class => 'form-control' %>
  </div>
  <div class="form-group">
    <%= f.label :email, 'Email (Optional)' %>
    <%= 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-large btn-primary" %>
<% end %>

Rails formhelper with bootstrap 3

2 个答案: