Rails: использование simple_form и интеграция Twitter-бутстрапа

Я пытаюсь создать приложение rails и simple_form выглядит как действительно полезный камень. Проблема в том, что я использую twitter bootstrap css для создания стиля, а simple_form не позволяет вам указать макет html.

Может ли кто-нибудь сказать мне, как я могу согласовать html simple_form в формате bootstrap css хочет?

Ответы

Ответ 1

Примечание. Этот ответ применим только к SimpleForm < 2.0

Начните с этого в config/initializers/simple_form.rb:

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

Затем пробел между элементом метки и входом, который вы можете добавить с этим:

label {
  margin-right: 20px;
}

Вероятно, больше, но это начало.

Ответ 2

Простая форма 2.0 поддерживает загрузку:

rails generate simple_form:install --bootstrap

Ответ 3

Недавно у меня была такая же проблема, и я попробовал сочетание bootstrap-sass и formtastic-bootstrap, Он работает с точно таким же кодом, что и код для форматирования, и показывает даже сообщения об ошибках, как ожидалось.

bootstrap-sass также работает с Rails 3.1 Asset Pipeline и Rails 3.0. formtastic-bootstrap проверяется с RSpec, поэтому я думаю, что это хороший способ!

Ответ 4

Я написал камень, чтобы сделать именно это. Это не simple_form, но он должен работать отлично бок о бок: twitter_bootstrap_form_for.

Ответ 5

simple_form допускает класс css (Passing in :html => {:class => nil} приведет только к классу simple_form.).
нотабене Это было добавлено 7/25/2011, поэтому многие существующие загрузки и документация не будут иметь его. Вы также можете обернуть его в div, который указывает стиль.

Вы также можете всегда создавать отдельный элемент с кодом, например

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

Ответ 6

Здесь полная конфигурация (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

Ответ 9

В этом railscast: http://railscasts.com/episodes/329-more-on-twitter-bootstrap вы можете увидеть, как настроить simple_form с помощью twitter bootstrap (пропустить до 3:05).

терминал:

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