Twitter-Bootstrap y Forms in Rails

Question

Esta puede ser una pregunta para principiantes pero no tiene mucha suerte para lograrlo. El fondo:

1. rieles versión 3.0.x
2. Bootstrap 2.0 - usando como pre-compilados simplemente se coloca en público/hojas de estilo. Att
3. Intentando hacer un formulario con disposición horizontal, es decir, etiqueta al lado del campo de entrada en la misma línea.

El problema es que no puedo conseguir que el formulario funcione, pero puedo obtener el código de ejemplo de Bootstrap predeterminado, de la misma forma que el diseño correcto. La forma de los carriles se parece a:

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

en cuenta que el método form_for tiene la clase de forma horizontal como se describe por en Bootsrap form CSS

Cuando se muestra la etiqueta, por ejemplo título, es de una sola línea ajustada a la izquierda y luego en la siguiente línea es el campo de entrada, también se ajustó a la izquierda.

Ahora bien, si se incluyen algunos de los códigos de muestra para Bootstrap formas, tales como:

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

entonces consigo el resultado esperado - etiqueta y campo de entrada en la misma línea en disposición horizontal.

He intentado agregar el estilo "control-label" en los componentes m.label y m.text_field, pero no me gustó que el diseño fuera horizontal.

Por lo tanto, no estoy seguro de cuál es el problema, ya que la parte de trabajo valida que puedo hacer que Bootstrap funcione, aunque con mi Formulario de rieles no respeta el formato horizontal.

Answer 1

Si usted quiere hacer la forma de vainilla (como en, sin simpleform-arranque o de otro gemas), necesita darle forma al formulario HTML en consecuencia:

<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 dice que el creador de formularios no está generando el html necesario para el framework bootstrap.

Definitivamente echa un vistazo al HTML necesario en el bootstrap example pages, y/o inspeccionando el DOM (encontré que no está muy bien documentado). Con todo, puedes hacerlo manualmente, como arriba, creando tu propio form builder, o usando varias gemas.

También como nota al margen, asegúrese de consultar how to customize the errors css, porque de forma predeterminada, cuando se produce un error de validación, el campo está envuelto por un <div class ="field_with_errors"> rompiendo los selectores de css utilizados por el programa de arranque.

Answer 2

El problema es que los helpers de campo no están generando el html apropiado para twitter bootstrap.

Puede usar la gema simple_form que es compatible con Twitter bootstrap. Consulte la documentación:

https://github.com/plataformatec/simple_form

Aquí está el ejemplo de aplicación: https://github.com/rafaelfranca/simple_form-bootstrap

demostración en vivo: http://simple-form-bootstrap.plataformatec.com.br/

Answer 3

He encontrado que la gema de arranque de Stephen Potenza es increíblemente útil (y fácil de usar). Añadir la gema a su Gemfile, y utilizar 'bootstrap_form_for', donde se usaría '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 %> 

hace que todo sea una brisa.

https://github.com/potenza/bootstrap_form

Answer 4

Otro enfoque que podría ser un poco más simple:

En su views/<model>/edit.html.erb:

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

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

A continuación, cree un archivo así views/<model>/_form.html.erb que contendrá los campos del formulario Bootstrap habilitado , es decir:

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