Twitter-Bootstrap и Forms в Rails

Question

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

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

Проблема в том, что я не могу заставить форму работать, но может получить пример кода 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 имеет класс form-horizontal , как описано в Bootsrap form CSS

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

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

<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 Form он не учитывает форму по горизонтали.

Answer 1

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

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

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

Answer 2

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

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

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

https://github.com/plataformatec/simple_form

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

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

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>