使用bootstrap设计编辑表单

Question

在我的编辑视图中，我想应用bootstrap。但是，在更换时......

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
    <%= devise_error_messages! %>
    <div class="row">
      <div class="col-md-6">
        <div class="row form-group">
          <div class="col-md-4"><%= f.label :username %></div>
          <div class="col-md-8"><%= f.text_field :username %></div>
        </div>

有了......

<div class="row">
  <div class="col-md-4">
     <div class="form-group">
        <label class="sr-only" for="username">Username</label>
        <input type="text" class="form-control" name="username" placeholder="Username" value="<%= f.text_field :username %>"> 
      </div>
  </div>
</div>

我将其作为输出

我尝试了很多替代方案来包含erb，但不了解这个问题。我应该如何在编辑表单中包含该字段？

Answer 1

你可以用rails做所有事情。

<div class="row">
  <div class="col-md-4">
     <div class="form-group">
        <%= f.label :username %>
        <%= f.text_field :username, class: "form-control", placeholder: "Username" %>
      </div>
  </div>
</div>

更多详情请访问此链接

http://apidock.com/rails/ActionView/Helpers/FormHelper/text_field

如果您想使用附加组件，可以按照以下方式

<div class='input-group' >
          <%= f.text_field :username, class: "form-control", placeholder: "Username" %>
          <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

Answer 2

试试这个

<div class="row">
  <div class="col-md-4">
     <div class="form-group">
        <label class="sr-only" for="username">Username</label>
        <%= f.text_field :username, class: "form-control", placeholder: "Username" %>
      </div>
  </div>
</div>

Answer 3

我建议使用名为simple_form的宝石，它由Devise的创建者制作，与Bootstrap很好地配合使用。它也有很好的验证错误。

https://github.com/plataformatec/simple_form

以下是一个例子：

= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
      .form-inputs
        = f.input :email, required: false, autofocus: true, placeholder: 'Email'
        = f.input :password, required: false, placeholder: 'Password'
        = f.input :remember_me, as: :boolean, label: 'Remember Me' if devise_mapping.rememberable?
      .form-actions
        = f.button :submit, 'Sign in', class: 'btn-block btn-success'
      %br
      = link_to 'Forgot your password?', new_user_password_path

上面的代码会自动添加任何引导类和标签......等等。