Twitter-Bootstrap dan Formulir di Rails

Ini mungkin pertanyaan pemula tetapi kurang beruntung dalam menjalankannya. Latar belakang:

  1. Rel versi 3.0.x
  2. Bootstrap 2.0 - menggunakan sebagai pra-kompilasi cukup ditempatkan ke publik/stylesheet. Att
  3. Mencoba membuat formulir dengan tata letak horizontal, yaitu memberi label di sebelah kolom input pada baris yang sama.

Masalahnya adalah saya tidak bisa membuat formulir berfungsi, tetapi bisa mendapatkan kode contoh Bootstrap default, dalam formulir yang sama untuk ditata dengan benar. Bentuk Rails terlihat seperti:

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

Perhatikan bahwa metode form_for memiliki kelas form-horizontal seperti yang dijelaskan dalam Bootsrap dari CSS

Saat ditampilkan labelnya, misalnya judul, berada pada satu baris yang disesuaikan ke kiri dan kemudian pada baris berikutnya adalah kolom input, juga disesuaikan ke kiri.

Sekarang jika saya menyertakan beberapa contoh kode Bootstrap untuk formulir seperti:

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

Lalu saya mendapatkan hasil yang diharapkan -- label dan kolom input pada baris yang sama dalam tata letak horizontal.

Saya telah mencoba menambahkan gaya "label-kontrol" ke komponen m.label dan m.text_field tetapi tidak senang mendapatkan tata letak horizontal.

Jadi, tidak yakin apa masalahnya, karena bagian yang berfungsi memvalidasi bahwa saya dapat membuat Bootstrap berfungsi, meskipun dengan Formulir Rails saya, formulir tersebut tidak mengikuti formulir-horizontal.


ruby-on-rails forms twitter-bootstrap
person Grant Sayer    schedule 22.02.2012    source sumber

Jawaban (4)


arrow_upward
14
arrow_downward

Jika Anda ingin membuat formulir vanilla (seperti, tanpa simpleform-bootstrap atau permata lainnya), Anda perlu membentuk formulir HTML yang sesuai:

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

Seperti yang dikatakan Arun Kumar Arjunan, pembuat formulir tidak menghasilkan html yang diperlukan untuk kerangka bootstrap.

Periksa HTML yang diperlukan di halaman contoh bootstrap, dan/atau dengan memeriksa DOM (saya menemukan bahwa itu tidak terdokumentasi dengan baik). Secara keseluruhan, Anda dapat melakukannya secara manual, seperti di atas, dengan membuat pembuat formulir Anda sendiri , atau dengan menggunakan berbagai permata.

Sebagai catatan tambahan, pastikan untuk membaca cara menyesuaikan kesalahan css, karena secara default, ketika terjadi kesalahan validasi, bidang tersebut dibungkus oleh <div class ="field_with_errors"> yang melanggar pemilih css yang digunakan oleh bootstrap.

person shuriu    schedule 28.02.2012

arrow_upward
3
arrow_downward

Masalahnya adalah pembantu lapangan tidak menghasilkan html yang tepat untuk bootstrap Twitter.

Anda dapat menggunakan permata simple_form yang mendukung bootstrap Twitter. Lihat dokumentasi:

https://github.com/plataformatec/simple_form

Berikut contoh aplikasinya: https://github.com/rafaelfranca/simple_form-bootstrap

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

person Arun Kumar Arjunan    schedule 22.02.2012
comment
Terima kasih - Penasaran saya masih melihat HTML dan kelas CSS yang sesuai pada HTML yang dihasilkan saat menggunakan atribut Bootstrap pada formulir. - person Grant Sayer; 22.02.2012

arrow_upward
3
arrow_downward

Saya menemukan permata bentuk bootstrap Stephen Potenza sangat membantu (dan mudah digunakan). Tambahkan permata ke file permata Anda, dan gunakan 'bootstrap_form_for' di mana Anda akan menggunakan '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 %>

Membuat semuanya menjadi mudah.

https://github.com/potenza/bootstrap_form

person Kyle Chadha    schedule 09.02.2014

arrow_upward
2
arrow_downward

Pendekatan lain yang mungkin sedikit lebih sederhana:

Di views/<model>/edit.html.erb Anda:

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

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

Kemudian, buat file seperti ini views/<model>/_form.html.erb yang akan berisi kolom formulir berkemampuan Bootstrap Anda, yaitu:

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