引导轨登入

Question

页

我现在的形式看起来是这样的：

<%= form_tag session_path, method: 'post' do %> 

    <%= label_tag :email_or_username, "Email or Username:" %> 

    <%= text_field_tag :email_or_username, nil, autofocus: true %> 

    <%=label_tag :password, "Password:" %> 

    <%= password_field_tag :password, nil %> 

    <%= submit_tag "Sign In", class: "btn btn-default btn-primary" %> 

    No account yet? 
    <%= link_to 'Sign Up', signup_path, class: "btn btn-default btn-primary" %>    

但我希望它看起来就像这样：

https://getbootstrap.com/examples/signin/

<div class="container"> 

    <form class="form-signin"> 
    <h2 class="form-signin-heading">Please sign in</h2> 
    <label for="inputEmail" class="sr-only">Email address</label> 
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""> 
    <label for="inputPassword" class="sr-only">Password</label> 
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required=""> 
    <div class="checkbox"> 
     <label> 
     <input type="checkbox" value="remember-me"> Remember me 
     </label> 
    </div> 
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
    </form> 

</div> 

如何纳入form_tag爵士乐到这个引导模板？

Answer 1

这是非常基本的东西，我建议你阅读其他堆栈溢出问题，因为有几个问题可以回答这个问题。但是这应该指向正确的方向。

<div class="container"> 
    <center><h2>Please sign in</h2></center> 
    <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> 
    <div class="field"> 
     <div class="row"> 
     <div class="col-md-4 offset-4"> 
      <%= f.label :email, "Email Address" %><br /> 
      <%= f.email_field :email, :class => 'form-control' %> 
     </div> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="row"> 
     <div class="col-md-4 offset-4"> 
      <%= f.label :password, "Password" %><br /> 
      <%= f.password_filed :password %> 
     </div> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="row"> 
     <div class="col-md-4 offset-4"> 
      <%= f.label :remember_me %> 
      <%= f.check_box :remember_me %> 
     </div> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="row"> 
     <div class="col-md-4 offset-4"> 
      <%= f.submit "Log-in", :class => 'btn btn-primary' %> 
     </div> 
     </div> 
    </div> 
    <% end %> 
</div> 

Adding Twitter bootstrap styling to Rails form helpers

这是一块宝石，我在我的应用程序使用，它处理了很多的创作形式，真正所有你需要做的就是添加定制的内容和风格，造型提示/提示/想法来从引导但看看这个表单创建等..

https://github.com/plataformatec/simple_form