你会如何用代码片段替换设计表单？

Question

我有这个注册页面片段，我想要使用。我的问题是我使用设计与我的Rails应用程序，所以我不知道如何用代码替换代码段中的字段，同时保留样式。

这是设计出的代码在我看来

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> 
     <%= devise_error_messages! %> 
     <div class="field"> 
      <%= f.label :email, :class=>'formlabel' %><br /> 
      <%= f.email_field :email, autofocus: true %> 
     </div> 

     <div class="field"> 
      <%= f.label :password, :class=>'formlabel' %> 
      <% if @minimum_password_length %> 
      <em>(<%= @minimum_password_length %> characters minimum)</em> 
      <% end %><br /> 
      <%= f.password_field :password, autocomplete: "off" %> 
     </div> 

     <div class="field"> 
      <%= f.label :password_confirmation, :class=>'formlabel' %><br /> 
      <%= f.password_field :password_confirmation, autocomplete: "off" %> 
     </div> 

     <div class="actions"> 
      <%= f.submit "Sign up" %> 
     </div> 
     <% end %> 

     <%= render "teachers/shared/links" %> 

，这是段

<div class="container-fluid stylish-form"> 
    <h2 class="text-center">Stylish Signup Page Using Bootstrap</h2> 
    <div class="row mar20"> 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
     <div class="inner-section"> 
     <form method="POST" action="https://google.co.in"> 
      <div class="mar20 inside-form"> 
      <h2 class="font_white text-center">SIGN UP</h2> 
      <ul> 
       <li class="icon-holder dsp-flex"> 
       <i class="fa fa-facebook "></i> 
       </li> 
       <li class="icon-holder dsp-flex"> 
       <i class="fa fa-twitter "></i> 
       </li> 
       <li class="icon-holder dsp-flex"> 
       <i class="fa fa-instagram "></i> 
       </li> 
      </ul> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-pencil "></i></span> 
       <input type="text" class="form-control" name="text" placeholder="First Name..."> 
      </div> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-envelope "></i></span> 
       <input type="email" class="form-control" name="text" placeholder="Email..."> 
      </div> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-lock "></i></span> 
       <input type="password" class="form-control" name="text" placeholder="Password..."> 
      </div> 
      <div class="footer text-center"> 
       <a href="http://vijender.in/" class="btn btn-neutral btn-round btn-lg">Get Started</a> 
      </div> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
    <h2 class="text-center font_white">Thank You For Visiting This Snippet</h2> 
</div> 

Answer 1

只需更换您的片段你的<input>标签。与原始表单上的<%= f.email_field :email, autofocus: true %>。添加任何其他缺失的选项，如占位符等。

比较生成的HTML，最终它会是相同的。