引導軌登入

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