Ruby-on-rails Rails 中的 Twitter-Bootstrap 和表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9390469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter-Bootstrap and Forms in Rails
提问by Grant Sayer
This may be a beginners question but not having much luck getting this going. The background:
这可能是一个初学者的问题，但没有太多运气来解决这个问题。背景：
- Rails 3.0.x version
- Bootstrap 2.0 - using as pre-compiled simply placed into public/stylesheets. Att
- Attempting to do a form with horizontal layout, i.e. label next to the input field on the same line.
- Rails 3.0.x 版本
- Bootstrap 2.0 - 使用作为预编译简单地放入公共/样式表。阿特
- 试图做一个水平布局的表单，即同一行输入字段旁边的标签。
The issue is that I can't get the form to work, but can get the default Bootstrap sample code, in the same form to layout correctly. The Rails form looks like:
问题是我无法让表单工作，但可以获取默认的 Bootstrap 示例代码，以相同的形式正确布局。Rails 表单如下所示：
<div class="row-fluid">
<div class="span4 well">
<%= form_for @member, :html => {:class => "form-horizontal"} do |m| %>
<fieldset>
<%= m.label :title %>
<%= m.text_field :title %>
<%= m.label :first_name %>
<%= m.text_field :first_name %>
<% end %>
</div>
</div>
Notice that the form_formethod has the class of form-horizontalas described by in Bootsrap form CSS
请注意，form_for方法具有在Bootsrap form CSS 中描述的form-horizontal类
When displayed the label, for example title, is on one line left adjusted and then on the next line is the input field, also left adjusted.
当显示标签时，例如标题，在一行左调整，然后在下一行是输入字段，也左调整。
Now if I include some of the sample Bootstrap code for forms such as:
现在，如果我包含一些表单的示例 Bootstrap 代码，例如：
<div>
<form class="form-horizontal">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</form>
</div>
Then I get the expected outcome -- label and input field on the same line in horizontal layout.
然后我得到了预期的结果——水平布局中同一行的标签和输入字段。
I've tried adding the style "control-label" onto the m.label and m.text_field components but no joy in getting the layout as horizontal.
我已经尝试将样式“control-label”添加到 m.label 和 m.text_field 组件上，但在将布局设为水平时并不高兴。
Thus, not sure what the issue is, since the working part validates that I can get Bootstrap to work, although with my Rails Form it's not honouring the form-horizontal.
因此，不确定问题是什么，因为工作部分验证了我可以让 Bootstrap 工作，尽管我的 Rails 表单不尊重表单水平。
采纳答案by shuriu
If you want to do the form vanilla (as in, without simpleform-bootstrap or other gems), you need to shape the form HTML accordingly:
如果您想使用原版表单（例如，没有 simpleform-bootstrap 或其他 gem），您需要相应地调整表单 HTML：
<div class="row-fluid">
<div class="span4 well">
<%= form_for @member, :html => {:class => "form-horizontal"} do |m| %>
<fieldset>
<legend>Member Form</legend>
<div class="control-group">
<%= m.label :title, :class => "control-label" %>
<div class="controls">
<%= m.text_field :title, :class => "input-xlarge" %>
</div>
</div>
<div class="form-actions">
<%= m.submit :class => "btn btn-primary" %>
</div>
</fieldset>
<% end %>
</div>
</div>
As Arun Kumar Arjunan says, the form builder is not generating the html needed for the bootstrap framework.
正如 Arun Kumar Arjunan 所说，表单构建器不会生成引导框架所需的 html。
Definitely check out the HTML needed in the bootstrap example pages, and/or by inspecting the DOM (i found that it's not really well documented). All in all, you can do it manually, like above, by creating your own form builder, or by using various gems.
一定要检查引导程序示例页面中所需的 HTML ，和/或通过检查 DOM（我发现它没有很好的文档记录）。总而言之，您可以像上面一样通过创建自己的表单构建器或使用各种 gem手动完成。
Also as a sidenote, make sure to check out how to customize the errors css, because by default, when a validation error occurs, the field is wrapped by a <div class ="field_with_errors">breaking the css selectors used by bootstrap.
另外作为旁注，请务必查看如何自定义错误 css，因为默认情况下，当发生验证错误时，该字段会通过<div class ="field_with_errors">破坏引导程序使用的 css 选择器来包装。
回答by Kyle Chadha
I've found Stephen Potenza's bootstrap-form gem to be incredibly helpful (and easy to use). Add the gem to your gemfile, and use 'bootstrap_form_for' where you would use 'form_for':
我发现 Stephen Potenza 的 bootstrap-form gem 非常有用（并且易于使用）。将 gem 添加到您的 gemfile 中，并在使用 'form_for' 的地方使用 'bootstrap_form_for'：
<%= bootstrap_form_for @user do |f| %>
<%= f.text_field :name, placeholder: "Enter your name" %>
<%= f.text_field :email, placeholder: "Enter your email" %><br>
<%= f.password_field :password, placeholder: "Enter a password" %>
<%= f.password_field :password_confirmation, hide_label: true, placeholder: "Confirm password" %>
<%= f.submit "Sign Up" %>
<% end %>
Makes the whole thing a breeze.
让整个事情变得轻而易举。
回答by Arun Kumar Arjunan
The problem is the field helpers are not generating the proper html for twitter bootstrap.
问题是字段助手没有为 twitter 引导程序生成正确的 html。
You can use simple_form gem which supports twitter bootstrap. See the documentation:
您可以使用支持 twitter bootstrap 的 simple_form gem。请参阅文档：
https://github.com/plataformatec/simple_form
https://github.com/plataformatec/simple_form
Here is the example application: https://github.com/rafaelfranca/simple_form-bootstrap
这是示例应用程序：https: //github.com/rafaelfranca/simple_form-bootstrap
Live Demo: http://simple-form-bootstrap.plataformatec.com.br/
回答by tofirius
Another approach that might be a bit simpler:
另一种可能更简单的方法：
In your views/<model>/edit.html.erb:
在您的views/<model>/edit.html.erb：
<%= form_for(@<model>, :html => {:class => 'form form-container'}) do |f| %>
<%= f.error_messages %>
<%= render '<model>/form',:f=>f %><% end %>
Then, create a file like this views/<model>/_form.html.erbwhich will contain your Bootstrap-enabled form fields, i.e.:
然后，创建一个这样的文件views/<model>/_form.html.erb，其中将包含启用 Bootstrap 的表单字段，即：
<div class="form-group">
<%= f.label(:name) %>
<%= f.text_field(:name, class: "form-control") %>
</div>
