CSS引导表格(Rails Newbie)



我试图使用CSS bootstrap在我的User_form中添加一些样式。

这就是当时的外观:

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@user) do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>
      <%= f.label :email %>
      <%= f.email_field :email %>
      <%= f.label :password %>
      <%= f.password_field :password %>
      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>
      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

我试图以:

的形式将其放置
<form>
<div class="form-group">
    <label for="name">Name</label>
    <input type="name" class="form-control" id="name"  placeholder="Enter name">
  </div>

<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  <div class="form-group">
    <label for="exampleInputConfirmPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputConfirmPassword1" placeholder="Password">
  </div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

我的问题是我不知道如何将功能添加到CSS表单中。我该怎么办?

预先感谢!

------编辑1 -------

为了澄清正在发生的事情:

我的_user_form.html.erb在此分钟看起来像第一组代码。但是,当我将其删除并用第二组代码替换时,什么都没有。

schema.rb

ActiveRecord::Schema.define(version: 20161210221810) do
  create_table "users", force: :cascade do |t|
    t.string   "name"
    t.string   "email"
    t.datetime "created_at",                        null: false
    t.datetime "updated_at",                        null: false
    t.string   "password_digest"
    t.string "remember_digest"
  end
end

只需在标签中添加一个类:

<%= f.label :name, class: "my_class" %>

首先使用包含表单项目的时,然后在JavaScript中将参数发送到您的后端!例如

 <form action="demo_form.asp" method="get">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
 </form> 

最新更新