Интеграция simple_form с bootstrap 3

Question

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

Answer 1

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

Answer 2

Это суть была очень полезно для меня:

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

Спасибо!

Answer 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 

Answer 4

Простая форма 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/.

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

Answer 5

Хорошие новости: по состоянию на апрель 2014 года, Bootstrap 3 integration is more fully supported, с дополнительными обертками, представленными в новом выпуске.

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

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