Rails:使用Bootstrap输入样式替换Rails中的内置form_for方法

时间:2023-01-15 18:56:02

I am trying to use Bootstrap forms 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.

我试图在Rails中使用Bootstrap表单。但是在检查了我的帖子脚手架创建的_form partial后,我不太确定如何用常规输入法编辑变量。

For example, this is the built-in form code:

例如,这是内置的表单代码:

<%= form_for(@post) do |f| %>

<div class="field">
 <%= f.label :name %><br />
 <%= f.text_field :name %>
</div>
<div class="field">
 <%= f.label :content %><br />
 <%= f.text_area :content %>
</div>
 <div class="actions">
 <%= f.submit %>
</div>

<% end %>

I want to use the form code below:

我想使用下面的表单代码:

<form>
<fieldset>
<legend>Start posting</legend>
<label>Name</label>
 <input class="span10" type="text" placeholder="Name: ">
<label>Content</label>
 <input class="span10" type="text" placeholder="Content: ">
<textarea rows="10"></textarea>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>

Question: How do I use Bootstrap version of form code?

问题:如何使用Bootstrap版本的表单代码?

I tried something like..

我试过像...

<input class="span10" type="text" name="@post.name" placeholder="Type in name: ">
<button type="submit" class="btn">Submit</button>

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:

但它似乎没有用。我认为Bootstrap提交按钮没有指向正确的方向,所以我也尝试了以下方法:

<input class="span10" type="text" name="@post.name" placeholder="Type in name: ">
<%= form_for(@post) do |f| %>
 <%= f.submit %>
<% end %>

Could someone please help me with this? I appreciate your help!

有人可以帮我这个吗?我感谢您的帮助!

1 个解决方案

#1


1  

Instead of doing it manually, you should add twitter-bootstrap-rails gem to your app. Se here for instructions and documentation: twitter-bootstrap-rails gem

您应该将twitter-bootstrap-rails gem添加到您的应用程序中,而不是手动执行。请点击这里获取说明和文档:twitter-bootstrap-rails gem

That will do the trick!

那就行了!

#1


1  

Instead of doing it manually, you should add twitter-bootstrap-rails gem to your app. Se here for instructions and documentation: twitter-bootstrap-rails gem

您应该将twitter-bootstrap-rails gem添加到您的应用程序中,而不是手动执行。请点击这里获取说明和文档:twitter-bootstrap-rails gem

That will do the trick!

那就行了!