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

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

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


ruby-on-rails twitter-bootstrap simple-form
person devinross    schedule 25.08.2011    source источник

Ответы (9)


arrow_upward
24
arrow_downward

Примечание. Этот ответ относится только к 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;
}

Там, вероятно, больше, но это начало.

person robinst    schedule 04.09.2011
comment
Выглядит хорошо, единственное, что я бы добавил в случае конфликтов с шаблоном simple_form: config.form_class = nil - person jevy; 12.09.2011
comment
@jevy Спасибо, добавил это к моему ответу. - person robinst; 15.09.2011
comment
Сразу предупреждаю тех, кто работает с SimpleForm v2. Некоторые из этих настроек изменились и больше не существуют. - person Marco; 27.11.2011

arrow_upward
23
arrow_downward

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

rails generate simple_form:install --bootstrap
person clyfe    schedule 24.02.2012

arrow_upward
5
arrow_downward

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

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

person Yuki Nishijima    schedule 11.11.2011

arrow_upward
4
arrow_downward

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

person Stephen Touset    schedule 13.10.2011
comment
это также изменяет формы, сгенерированные скаффолдом? - person rtdp; 17.10.2011
comment
Нет. Строительные леса не должны быть красивыми. - person Stephen Touset; 19.10.2011

arrow_upward
3
arrow_downward

Вот полная конфигурация (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
person James McKinney    schedule 12.11.2011

arrow_upward
3
arrow_downward

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

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

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

person Michael Durrant    schedule 29.08.2011

arrow_upward
2
arrow_downward

Я нашел это, кажется, работает нормально https://github.com/rafaelfranca/simple_form-bootstrap не известно о тесной интеграции

person woto    schedule 27.11.2011

arrow_upward
2
arrow_downward

Если вы используете SimpleForm 1.5, авторы драгоценного камня предоставят вам необходимые инструкции по настройке здесь: https://github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-integration

person Alberto    schedule 20.12.2011

arrow_upward
0
arrow_downward

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

терминал:

rails g simple_form:install --bootstrap

модель/_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 %>
person Benjamin Crouzier    schedule 13.04.2013