Note that there are some explanatory texts on larger screens.

plurals
  1. PORails: Using Bootstrap Input Style to Replace the built-in form_for method in Rails
    primarykey
    data
    text
    <p>I am trying to use <a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="nofollow">Bootstrap forms</a> in Rails. But after inspecting the _form partial created by my post scaffold, I'm not quite sure how I can edit the variables with regular input methods.</p> <p><strong>For example, this is the built-in form code:</strong></p> <pre><code>&lt;%= form_for(@post) do |f| %&gt; &lt;div class="field"&gt; &lt;%= f.label :name %&gt;&lt;br /&gt; &lt;%= f.text_field :name %&gt; &lt;/div&gt; &lt;div class="field"&gt; &lt;%= f.label :content %&gt;&lt;br /&gt; &lt;%= f.text_area :content %&gt; &lt;/div&gt; &lt;div class="actions"&gt; &lt;%= f.submit %&gt; &lt;/div&gt; &lt;% end %&gt; </code></pre> <p><strong>I want to use the form code below:</strong></p> <pre><code>&lt;form&gt; &lt;fieldset&gt; &lt;legend&gt;Start posting&lt;/legend&gt; &lt;label&gt;Name&lt;/label&gt; &lt;input class="span10" type="text" placeholder="Name: "&gt; &lt;label&gt;Content&lt;/label&gt; &lt;input class="span10" type="text" placeholder="Content: "&gt; &lt;textarea rows="10"&gt;&lt;/textarea&gt; &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt; &lt;/fieldset&gt; &lt;/form&gt; </code></pre> <p><strong>Question: How do I use Bootstrap version of form code?</strong></p> <p>I tried something like..</p> <pre><code>&lt;input class="span10" type="text" name="@post.name" placeholder="Type in name: "&gt; &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt; </code></pre> <p>But it doesn't seem to work. I thought the Bootstrap submit button is not pointing at the right direction, so I tried the following as well:</p> <pre><code>&lt;input class="span10" type="text" name="@post.name" placeholder="Type in name: "&gt; &lt;%= form_for(@post) do |f| %&gt; &lt;%= f.submit %&gt; &lt;% end %&gt; </code></pre> <p>Could someone please help me with this? I appreciate your help!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload