使用UIKit的Rails登錄窗體

我有一個使用以下登錄窗體的Rails應用程序，它工作得很好，但還沒有任何樣式。使用UIKit的Rails登錄窗體

<h1>Session#login</h1> 
<p>Find me in app/views/session/login.html.erb</p> 
<% flash.each do |name, msg| -%> 
    <%= content_tag :div, msg, class: name %> 
<% end -%> 
<form action="<%= session_login_url %>" method="POST"> 
    <label for="username">Username:</label> 
    <input type="text" name="username" id="username"> 
    <label for="password">Password:</label> 
    <input type="password" name="password" id="password"> 
    <%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %> 
    <input type="submit" value="Login"> 
</form>

所以我想添加一些CSS與UIKit的，並試圖從UIKit的主頁，我的形式適應的例子如下所示：

<body class="uk-height-1-1"> 
<div class="uk-vertical-align uk-text-center uk-height-1-1"> 
    <div class="uk-vertical-align-middle" style="width: 250px;"> 
    <img class="uk-margin-bottom" width="140" height="120" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KC...1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBvcGFjaXR5PSIwLjciPg0KCTxwYXRoIGZpbGw9IiNEOEQ4RDgiIGQ9Ik0tNi4zMzMsMjk4LjY1NHY3My42OTFoOTMuNjY3di03My42OTFILTYuMzMzeiBNNzkuNzg4LDM2NC4zNTVIMS42NTZ2LTU3LjcwOWg3OC4xMzJWMzY0LjM1NXoiLz4NCgk8cG9seWdvbiBmaWxsPSIjRDhEOEQ4IiBwb2ludHM9IjUuODYsMzU4LjE0MSAyMS45NjIsMzQxLjIxNiAyNy45OTUsMzQzLjgyNyA0Ny4wMzIsMzIzLjU2MSA1NC41MjQsMzMyLjUyMyA1Ny45MDUsMzMwLjQ4IA0KCQk3Ni4yMDMsMzU4LjE0MSAJIi8+DQoJPGNpcmNsZSBmaWxsPSIjRDhEOEQ4IiBjeD0iMjQuNDYyIiBjeT0iMzIxLjMyMSIgcj0iNy4wMzQiLz4NCjwvZz4NCjwvc3ZnPg0K"> 

    <form action="<%= session_login_url %>" method="POST" class="uk-panel uk-panel-box uk-form"> 
     <div class="uk-form-row"> 
     <input type="text" id="username" class="uk-width-1-1 uk-form-large" placeholder="Username"> 
     </div> 
     <div class="uk-form-row"> 
     <input type="password" id="password" class="uk-width-1-1 uk-form-large" placeholder="Password"> 
     </div> 
     <div class="uk-form-row"> 
     <%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %> 
     <input type="submit" value="Login" class="uk-width-1-1 uk-button uk-button-primary uk-button-large"> 
     </div> 
    </form> 
    </div> 
</div> 
</body>

但現在的形式停止工作完全。任何想法爲什麼？

來源

2014-11-23 Peter Piper

我不知道爲什麼 - 但這似乎工作！

<body class="uk-height-1-1"> 
    <div class="uk-vertical-align uk-text-center uk-height-1-1"> 
     <div class="uk-vertical-align-middle" style="width: 250px;"> 

<h1>Session#login</h1> 
<p>Find me in app/views/session/login.html.erb</p> 
<% flash.each do |name, msg| -%> 
    <%= content_tag :div, msg, class: name %> 
<% end -%> 
<form class="uk-panel uk-panel-box uk-form" action="<%= session_login_url %>" method="POST"> 
    <div class="uk-form-row"> 
    <input class="uk-width-1-1 uk-form-large" placeholder="Username" type="text" name="username" id="username"> 
    </div> 
    <div class="uk-form-row"> 
    <input class="uk-width-1-1 uk-form-large" placeholder="Password" type="password" name="password" id="password"> 
    </div> 
    <div class="uk-form-row"> 
    <%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %> 
    <input class="uk-width-1-1 uk-button uk-button-primary uk-button-large" type="submit" value="Login"> 
    </div> 
</form> 


    </div> 
</div> 
</body>

來源

2014-11-23 14:52:24

使用UIKit的Rails登錄窗體

回答

相關問題