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

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

23 голосов
/ 26 августа 2011

Я пытаюсь создать приложение для rails, и simple_form выглядит действительно полезным камнем.Проблема заключается в том, что я использую Twitter начальной загрузки CSS для стилизации, а simple_form не позволяет вам указывать макет HTML.

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

Ответы [ 9 ]

24 голосов
/ 04 сентября 2011

Примечание. Этот ответ относится только к SimpleForm <2.0 </em>

Начните с этого в 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;
}

Возможно, есть и другое, но это только начало.

23 голосов
/ 24 февраля 2012

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

rails generate simple_form:install --bootstrap
5 голосов
/ 11 ноября 2011

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

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

4 голосов
/ 13 октября 2011

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

3 голосов
/ 12 ноября 2011

Вот полный конфиг (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
3 голосов
/ 29 августа 2011

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

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

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

2 голосов
/ 20 декабря 2011

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

2 голосов
/ 27 ноября 2011

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

0 голосов
/ 13 апреля 2013

В этом Railscast: http://railscasts.com/episodes/329-more-on-twitter-bootstrap, вы можете увидеть, как настроить simple_form с помощью начальной загрузки Twitter (перейдите к 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 %>
...