ruby-on-rails - 使用 Twitter Bootstrap 设计电子邮件联系表单的样式

Question

我对编程和尝试学习 Rails 还是很陌生。我已经复制并粘贴了来自 http://matharvard.ca/posts/2011/aug/22/contact-form-in-rails-3/ 的电子邮件表格。我现在正尝试将 twitter bootstrap 样式应用于下面的表单。我尝试了几种不同的方法，但没有成功，但我想我不了解 fieldset 标签存在的内容和原因，以及如何将各种 css 类应用于我认为是助手的东西。如果有人能给我指出正确的方向，那就太好了(对于编程、设计和 Rails 来说仍然很新，所以如果有人能确认我正在寻找帮助者，那将是一个奖励)。

预先感谢您的帮助。

<%= form_for @message, :url => contact_path do |form| %>
<fieldset class="fields">
 <div class="field">
  <%= form.label :name %>
  <%= form.text_field :name %>
 </div>

 <div class="field">
  <%= form.label :email %>
  <%= form.text_field :email %>
 </div>
 <div class="field">
  <%= form.label :subject %>
  <%= form.text_field :subject %>
 </div>

 <div class="field">
  <%= form.label :venue %>
  <%= form.text_field :venue %>
 </div>

 <div class="field">
  <%= form.label :date %>
  <%= form.text_field :date %>
 </div>

 <div class="field">
  <%= form.label :time %>
  <%= form.text_field :time %>
 </div>

 <div class="field">
  <%= form.label :body %>
  <%= form.text_area :body %>
 </div>
</fieldset>

<fieldset class="actions">
  <%= form.submit "Send" %>
 </fieldset>
<% end %>

Answer 1

它应该是这样的:

<%= form_for @message, :url => contact_path, :html => {:class => "form-horizontal"} do |form| %>
<fieldset>
 <div class="control-group">
  <%= form.label :name, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :name %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :email, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :email %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :subject, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :subject %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :venue, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :venue %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :date, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :date %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :time, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :time %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :body, :class => "control-label" %>
  <div class="controls">
    <%= form.text_area :body %>
  </div>
 </div>

 <div class="control-group">
  <div class="controls">
    <%= form.submit "Send" %>
  </div>
 </div>

</fieldset>
<% end %>

在具有多个表单的大型 Rails 应用程序中添加此样式会令人头疼。所以我推荐你使用SimpleForm Twitter Bootstrap 生成器附带的 gem(阅读安装指南)。

有了这个 gem，你的表单就可以像这样简单地启动了:

<%= simple_form_for @message, :url => contact_path, :html => { :class => 'form-horizontal' } do |form| %>
  <%= form.input :name %>
  <%= form.input :email %>
  <%= form.input :subject %>
  <%= form.input :venue %>
  <%= form.input :date %>
  <%= form.input :time %>
  <%= form.button :submit %>
<% end %>