Question

我仍然是编程和尝试使用rails学习的新手。我已复制并粘贴了来自http://matharvard.ca/posts/2011/aug/22/contact-form-in-rails-3/的电子邮件表单，我现在正尝试将twitter引导样式应用于下面的表单。我已经尝试了几种不同的方法但没有运气，但我想我不了解fieldset标签存在的内容和原因以及如何将各种css类应用于我认为是帮助者的方法。如果有人可以指出我的方向很好（对编程，设计和轨道来说还是很新的话，那么如果有人能确认我在这里寻找助手那将是一个奖励）。

提前感谢您的帮助。

<%= 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应用程序中添加此样式会很麻烦。所以我建议你使用twitter bootstrap生成器附带的SimpleForm 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 %>

Answer 2

我正在通过手机输入此内容，因此我无法详细介绍。 HTML中的fieldset标记用于分组相关的表单字段。它没有做太多。你可以删除你想要的。

Twitter引导程序对HTML的组织方式和应用的类的方式相对严格。通过从Twitter引导程序文档复制一些示例表单HTML并用Rails代码替换表单字段来生成它们会更好。

使用Twitter Bootstrap设置电子邮件联系表单的样式

2 个答案: