Интеграция простой формы с bootstrap 3

Я обновил bootstrap до версии 3. Все работает нормально, за исключением форм, которые генерируются simple_form gem. Я не знаю, как я мог бы объединить эти два вместе. Я также не могу найти никаких полезных предложений в репозитории проекта github. Так есть ли у кого-нибудь решение для меня ?

5 15
ruby-on-rails twitter-bootstrap twitter-bootstrap-3 simple-form

5 ответов:

Здесь есть запись в блоге http://stabco.tumblr.com/post/59760641051/simple-form-bootstrap3-integration похоже, это хорошее решение. Он обновляет инициализатор в соответствии с bootstrap 3.

14

Эта мысль мне очень помогла:

Https://gist.github.com/tokenvolt/6599141

Спасибо!

11

Простая форма 3.1.0.rc1 только что был выпущен, что должно решить ваши проблемы интеграции. Смотрите запись в блоге об этом на http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/, или просто смотрите последнюю простую форму для Bootstrap здесь: http://simple-form-bootstrap.plataformatec.com.br/.

Поэтому, если вы обновите свою простую форму до этой версии, вы должны быть хороши.

3

Вам нужно создать специальную настройку simple_form для начальной загрузки, создав инициализатор в config / initializers и заполнив его нижеприведенным содержимым.

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.wrappers :bootstrap, tag: 'div', class: 'control-group', error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

  config.wrappers :prepend, tag: 'div', class: "control-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
        prepend.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  config.wrappers :append, tag: 'div', class: "control-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-append' do |append|
        append.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  # Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
  # Check the Bootstrap docs (http://twitter.github.com/bootstrap)
  # to learn about the different styles for forms and inputs,
  # buttons and other elements.
  config.default_wrapper = :bootstrap
end
1

Хорошая новость для всех: по состоянию на апрель 2014 года, интеграция Bootstrap 3 более полно поддерживается , с дополнительными оболочками, предусмотренными в новой версии.

Мы только что выпустили простую форму 3.1.0.rc1 с поддержкой Bootstrap 3. Чтобы сделать это возможным, мы выровняли API-оболочку, чтобы сделать ее более расширяемой и позволить разработчикам напрямую настраивать его вместо того, чтобы полагаться на глобальное состояние. После таких улучшений было очень легко изменить конфигурацию простой формы на работа с Bootstrap 3.

Вы можете увидеть новую функциональность в действии через пример приложения здесь: http://simple-form-bootstrap.plataformatec.com.br/

0