Twitter-Bootstrap และแบบฟอร์มใน Rails

นี่อาจเป็นคำถามสำหรับผู้เริ่มต้นแต่ไม่มีโชคมากนักในการดำเนินการนี้ พื้นหลัง:

  1. Rails เวอร์ชัน 3.0.x
  2. Bootstrap 2.0 - ใช้เป็นไฟล์ที่คอมไพล์ไว้ล่วงหน้าและวางไว้ใน public/stylesheets เรียน
  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 ฟอร์ม 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 Form ของฉันจะไม่ได้ยึดตามแบบฟอร์มแนวนอนก็ตาม


ruby-on-rails forms twitter-bootstrap
person Grant Sayer    schedule 22.02.2012    source แหล่งที่มา

คำตอบ (4)


arrow_upward
14
arrow_downward

หากคุณต้องการสร้างแบบฟอร์ม vanilla (เช่น โดยไม่มี 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>

ดังที่ Arun Kumar Arjunan กล่าวไว้ ตัวสร้างฟอร์มไม่ได้สร้าง html ที่จำเป็นสำหรับเฟรมเวิร์กบูตสแตรป

ตรวจสอบ HTML ที่จำเป็นอย่างแน่นอนในหน้าตัวอย่าง bootstrap และ/หรือ โดยการตรวจสอบ DOM (ฉันพบว่าไม่มีเอกสารที่ดีนัก) โดยรวมแล้ว คุณสามารถทำได้ด้วยตนเองเหมือนกับด้านบน โดยการสร้างตัวสร้างแบบฟอร์ม ของคุณเอง หรือโดยการใช้อัญมณีต่างๆ

นอกจากนี้ อย่าลืมตรวจสอบ วิธีปรับแต่ง css ข้อผิดพลาด เนื่องจากโดยค่าเริ่มต้น เมื่อเกิดข้อผิดพลาดในการตรวจสอบความถูกต้อง ฟิลด์จะถูกล้อมด้วย <div class ="field_with_errors"> เพื่อทำลายตัวเลือก css ที่ใช้โดย bootstrap

person shuriu    schedule 28.02.2012

arrow_upward
3
arrow_downward

ปัญหาคือผู้ช่วยภาคสนามไม่ได้สร้าง 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/

person Arun Kumar Arjunan    schedule 22.02.2012
comment
ขอบคุณ - อยากรู้ว่าฉันยังคงเห็น HTML และคลาส CSS ที่เหมาะสมบน HTML ที่สร้างขึ้นเมื่อใช้แอตทริบิวต์ Bootstrap บนแบบฟอร์ม - person Grant Sayer; 22.02.2012

arrow_upward
3
arrow_downward

ฉันพบว่าอัญมณีรูปแบบบูตสแตรปของ Stephen Potenza มีประโยชน์อย่างเหลือเชื่อ (และใช้งานง่าย) เพิ่ม gem ลงใน 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

person Kyle Chadha    schedule 09.02.2014

arrow_upward
2
arrow_downward

อีกวิธีหนึ่งที่อาจง่ายกว่านี้เล็กน้อย:

ใน 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>
person tofirius    schedule 25.05.2017