Twitter-Bootstrap和Rails中的窗體

Question

這可能是一個初學者的問題，但沒有太多的運氣讓這個去。背景：

1. 的Rails 3.0.x的版本
2. 引導2.0 - 使用如預編譯簡單地放置到公共/樣式表。 Att
3. 嘗試執行水平佈局的表單，即在同一行上的輸入字段旁邊的標籤。

問題是我無法讓表單正常工作，但可以使用相同的表單來正確佈局默認的Bootstrap示例代碼。滑軌形式如下：

<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> 

注意，的form_for方法具有類的形式水平如通過Bootsrap form CSS

描述當顯示的標籤，例如標題，是對一個行左調整，然後在下一行是輸入字段，也左調整。

現在，如果我有一些示例代碼引導爲形式，如：

<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> 

然後我得到預期的結果 - 標籤和輸入框在橫向佈局在同一行。

我試着將樣式「控制標籤」添加到m.label和m.text_field組件上，但沒有將佈局設置爲水平的喜悅。

因此，不知道是什麼問題，因爲工作部分驗證我可以讓Bootstrap工作，雖然使用我的Rails窗體它不遵守窗體橫向。

Answer 1

如果你想要做的形式香草（如，沒有simpleform自舉或其他寶石），你需要相應地塑造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 A rjunan說，表單生成器不會生成引導框架所需的html。

絕對檢查出bootstrap example pages中需要的HTML，和/或通過檢查DOM（我發現它沒有很好的記錄）。總而言之，您可以通過創建自己的form builder或使用各種寶石來手動完成上述操作。

另外作爲旁註，一定要檢查出how to customize the errors css，因爲默認情況下，當發生驗證錯誤時，該字段將被打包由<div class ="field_with_errors">打破引導程序使用的css選擇器。

Answer 2

問題是字段幫助程序沒有爲twitter引導生成適當的html。

您可以使用支持twitter引導的simple_form gem。請參閱文檔：

https://github.com/plataformatec/simple_form

下面是示例應用程序：https://github.com/rafaelfranca/simple_form-bootstrap

現場演示：http://simple-form-bootstrap.plataformatec.com.br/

Answer 3

我發現Stephen Potenza的bootstrap-form gem非常有用（並且易於使用）。寶石添加到您的Gemfile，並使用「bootstrap_form_for」，你會用「的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 %> 

使整個事情變得輕而易舉。

https://github.com/potenza/bootstrap_form

Answer 4

另一種方法，可能是一個有點簡單：

在你views/<model>/edit.html.erb：

<%= form_for(@<model>, :html => {:class => 'form form-container'}) do |f| %> 
<%= f.error_messages %> 

<%= render '<model>/form',:f=>f %><% end %> 

然後，像這樣創建views/<model>/_form.html.erb一個文件，該文件將包含啓用了引導，表單字段，即：

<div class="form-group"> 
    <%= f.label(:name) %> 
    <%= f.text_field(:name, class: "form-control") %> 
</div>