Twitter-Bootstrap и Forms in Rails

Question

Это может быть вопрос для новичков, но не так много удачи в этом. Фон:

1. Rails 3.0.x версия
2. Bootstrap 2.0 - использование в качестве предварительно скомпилированных просто помещаются в государственные/таблицы стилей. Att
3. Попытка сделать форму с горизонтальной компоновкой, т.е. меткой рядом с полем ввода в той же строке.

Проблема заключается в том, что я не могу заставить форму работать, но может получить код образца Bootstrap по умолчанию в той же форме, что и в макете. Форма Рельсы выглядит следующим образом:

<div class="row-fluid"> 
    <div class="span4 well"> 
    <%= form_for @member, :html => {:class => "form-horizontal"} do |m| %> 
     <fieldset> 

      <%= m.label :title %> 
      <%= m.text_field :title %> 

      <%= m.label :first_name %> 
      <%= m.text_field :first_name %> 
    <% end %> 
    </div> 
</div> 

Обратите внимание, что form_for метод имеет класс форм-горизонтальной, как описано в Bootsrap form CSS

При отображении метку, например, название, находится на одной линия левая, а затем на следующей строке - поле ввода, а также отрегулировано влево.

Теперь, если я включаю некоторые из кода Bootstrap образца для форм, таких как:

<div> 
    <form class="form-horizontal"> 
    <fieldset> 
     <legend>Legend text</legend> 
     <div class="control-group"> 
     <label class="control-label" for="input01">Text input</label> 

     <div class="controls"> 
      <input type="text" class="input-xlarge" id="input01"> 

      <p class="help-block">Supporting help text</p> 
     </div> 
     </div> 
    </fieldset> 
    </form> 
</div> 

Тогда я получаю ожидаемый результат - метки и поля ввода на той же линии в горизонтальной компоновки.

Я попытался добавить стиль «контрольная метка» к компонентам m.label и m.text_field, но не радует, когда макет будет горизонтальным.

Таким образом, не уверен, в чем проблема, так как рабочая часть подтверждает, что я могу заставить Bootstrap работать, хотя с моей формой Rails она не выполняет форму горизонтально.

Answer 1

Если вы хотите сделать вид ванили (как, без simpleform-загрузчике или других драгоценные камни), вам необходимо сформировать форму HTML соответственно:

<div class="row-fluid"> 
    <div class="span4 well"> 
    <%= form_for @member, :html => {:class => "form-horizontal"} do |m| %> 
     <fieldset> 
      <legend>Member Form</legend> 
      <div class="control-group"> 
      <%= m.label :title, :class => "control-label" %> 
      <div class="controls"> 
       <%= m.text_field :title, :class => "input-xlarge" %> 
      </div> 
      </div> 

      <div class="form-actions"> 
      <%= m.submit :class => "btn btn-primary" %> 
      </div> 
     </fieldset> 
    <% end %> 
    </div> 
</div> 

As Arun Kumar A rjunan говорит, что построитель форм не генерирует html, необходимый для фреймворка bootstrap.

Определенно проверьте HTML-код, необходимый в bootstrap example pages, и/или проверив DOM (я обнаружил, что это не очень хорошо документировано). В общем, вы можете сделать это вручную, как и выше, создав свой собственный form builder или используя различные драгоценные камни.

Кроме того, в качестве оповещения не забудьте проверить how to customize the errors css, потому что по умолчанию при возникновении ошибки проверки поле обертывается <div class ="field_with_errors">, разбивая селектора css, используемые бутстрапом.

Answer 2

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

Вы можете использовать simple_form gem, который поддерживает twitter bootstrap. Обратитесь к документации:

https://github.com/plataformatec/simple_form

Вот пример применения: https://github.com/rafaelfranca/simple_form-bootstrap

Демо: http://simple-form-bootstrap.plataformatec.com.br/

Answer 3

Я нашел камень для самонаведения Стефана Потенца, который будет невероятно полезен (и прост в использовании). Добавить камень в ваш Gemfile и использовать «bootstrap_form_for», где вы будете использовать «form_for»:

<%= bootstrap_form_for @user do |f| %> 
    <%= f.text_field :name, placeholder: "Enter your name" %> 
    <%= f.text_field :email, placeholder: "Enter your email" %><br> 
    <%= f.password_field :password, placeholder: "Enter a password" %> 
    <%= f.password_field :password_confirmation, hide_label: true, placeholder: "Confirm password" %> 
<%= f.submit "Sign Up" %> 
<% end %> 

Делает все это ветер.

https://github.com/potenza/bootstrap_form

Answer 4

Другой подход, который может быть немного проще:

В вашем views/<model>/edit.html.erb:

<%= form_for(@<model>, :html => {:class => 'form form-container'}) do |f| %> 
<%= f.error_messages %> 

<%= render '<model>/form',:f=>f %><% end %> 

Затем создайте файл как этот views/<model>/_form.html.erb, который будет содержать ваши Bootstrap с поддержкой поля формы , т.е.:

<div class="form-group"> 
    <%= f.label(:name) %> 
    <%= f.text_field(:name, class: "form-control") %> 
</div>