ruby on rails - simple_form_for - Rails: usando simple_form e integrando Twitter Bootstrap

simple_form_for rails 5

Question

Estoy tratando de construir una aplicación de rieles y simple_form parece ser una gema realmente útil. El problema es que estoy usando twitter bootstrap css para hacer el estilo y simple_form no le permite especificar el diseño del html.

¿Alguien puede decirme cómo puedo adaptar el html simple_form al formato bootstrap que quiere css?

Answer 1

Aquí está la configuración completa (config / initializers / simple_form.rb):

SimpleForm.setup do |config|
  config.hint_class = ''help-block''
  config.error_class = ''help-inline''
  config.wrapper_class = ''clearfix''
  config.wrapper_error_class = ''error''
  config.label_text = lambda { |label, required| "#{label} #{required}" }
  config.form_class = nil
end

Answer 2

En este railscast: http://railscasts.com/episodes/329-more-on-twitter-bootstrap , puede ver cómo personalizar simple_form con twitter bootstrap (pase a 3:05).

terminal :

rails g simple_form:install --bootstrap

model / _form.html.erb:

<%= simple_form_for @product, :html => { :class => ''form-horizontal'' } do |f| %>
  <fieldset>
    <legend><%= controller.action_name.capitalize %> Product</legend>

    <%= f.input :name %>
    <%= f.input :price %>

    <div class="form-actions">
      <%= f.submit nil, :class => ''btn btn-primary'' %>
      <%= link_to ''Cancel'', products_path, :class => ''btn'' %>
    </div>
  </fieldset>
<% end %>

Answer 3

Encontré esto, parece funcionar bien github.com/rafaelfranca/simple_form-bootstrap no se sabe acerca de la integración estrecha

Answer 4

Escribí una joya para hacer exactamente esto. No es simple_form, pero debería funcionar bien de lado a lado: twitter_bootstrap_form_for .

Answer 5

La forma simple 2.0 es compatible con bootstrap:

rails generate simple_form:install --bootstrap

Answer 6

Recientemente tuve el mismo problema y probé la combinación de bootstrap-sass y formtastic-bootstrap . Funciona exactamente con el mismo código que el código de Formtastic y muestra incluso los mensajes de error como se esperaba.

bootstrap-sass también funciona con Rails 3.1 Asset Pipeline y Rails 3.0. formtastic-bootstrap se ha probado con RSpec, así que creo que esta es una buena manera de hacerlo.

Answer 7

Si utiliza SimpleForm 1.5, los autores de la gema le proporcionan las instrucciones de configuración necesarias aquí: https://github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-integration

Answer 8

simple_form permite una clase css (pasar :html => {:class => nil} dará como resultado una clase "simple_form").
nb Esto se agregó el 25/7/2011, por lo que muchas descargas y documentación existentes no lo tendrán. También puedes envolverlo en un div que especifique un estilo.

También puede siempre diseñar un elemento individual con un código como

<%= f.input :username, :label_html => { :class => ''my_class'' } %>

Answer 9

Nota: esta respuesta solo se aplica a SimpleForm <2.0

Comience con esto en config/initializers/simple_form.rb :

SimpleForm.form_class = nil
SimpleForm.wrapper_class = ''clearfix''
SimpleForm.wrapper_error_class = ''error''
SimpleForm.error_class = ''help-inline''

Luego falta espacio entre el elemento de etiqueta y la entrada, que puede agregar con esto:

label {
  margin-right: 20px;
}

Probablemente hay más, pero es un comienzo.