Bootstrap-Schienen signin Seite

Question

Gerade jetzt meine Form sieht wie folgt aus etwas:

<%= 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" %>    

Aber ich will es genau so aussehen:

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> 

Wie integriere ich die form_tag Jazz in diese Bootstrap-Vorlage?

Answer 1

Das ist ziemlich einfach, ich würde vorschlagen, dass Sie andere Fragen zum Stapelüberlauf lesen, da es einige Fragen gibt, die das beantworten. Aber das sollte Sie in die richtige Richtung weisen.

<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

Dies ist ein Juwel ich in meiner Apps nutzen, es behandelt eine Menge Form Schöpfung und wirklich alles, was Sie tun müssen, ist Ihre Anpassungen und Stile hinzufügen, Styling Hinweise/Tipps/Ideen von Bootstrap aber ect für Formularerstellung überprüfen ..

https://github.com/plataformatec/simple_form