Twitter-Bootstrap и формы в Rails

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

версия Rails 3.0.x
Bootstrap 2.0 - использование как предварительно скомпилированное, просто помещенное в public/stylesheets. Att
Попытка сделать форму с горизонтальной компоновкой, т.е. надпись рядом с полем ввода в той же строке.

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

<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>

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

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

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

Ответ 1

Если вы хотите сделать форму ванили (как и в, без простой формы-бутстрапа или других драгоценных камней), вам нужно соответствующим образом сформировать форму 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>

Как говорит Арун Кумар Арджунан, построитель форм не генерирует html, необходимый для фреймворка bootstrap.

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

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

Ответ 2

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

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

https://github.com/plataformatec/simple_form

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

Live Demo: http://simple-form-bootstrap.plataformatec.com.br/

Ответ 3

Я нашел драгоценный камень для начальной загрузки Stephen Potenza, чтобы быть невероятно полезным (и простым в использовании). Добавьте драгоценный камень в свой 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

Ответ 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>