在 rails 中使用 bootstrap 设计登录

Question

我正在使用 devise 并且登录页面非常标准，所以现在我正在尝试使用 bootstrap 模板。

设计代码：

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

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

  <% if devise_mapping.rememberable? -%>
    <div class="field">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end -%>

  <div class="actions">
    <%= f.submit "Log in" %>
  </div>
<% end %>

以及我选择的代码模板：

<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> <!-- /container -->

那么如何更改此模板以使用我的变量，如 f.email_field，或者我是否只需要更改输入标签中的 ID？我需要在容器中使用 form_for 吗？我现在真的不知道如何使用此模板以同样的方式工作。

Answer 1

您可以像这样添加 class 和带有 ruby 的 ID：

<%= f.label :email,'Email address', class: 'sr-only' %>
<%= f.email_field :email, autofocus: true, class: 'form-control', id: 'inputEmail' %>

Bootstrap 使用嵌套在标签中的复选框输入。 http://getbootstrap.com/css/#forms 您可以通过在 rails 样式复选框周围添加一个 html 标签来解决这个问题。

<% if devise_mapping.rememberable? -%>
    <div class="checkbox">
        <label><%= f.check_box :remember_me %> Remember me</label>
    </div>
<% end -%>

Answer 2

好的...所以这个问题有几个部分。

首先，我会采用相反的方法而不是 "changing the template to use your variables" - 一点一点地更改您的设计代码，直到它生成的 HTML 与 bootstrap 示例匹配。

现在，在 bootstrap 示例中，class 属性用于设置样式 - 它们需要保持原样。 id 和 for 属性不用于样式设置，并且这些属性是否发生变化也无关紧要（即，设计可以选择它们想要的样子，而您没有担心）。

所以下一步是检查两个代码示例，并找出设计代码的哪些位与 bootstrap 代码的哪些位相对应。然后，修改每一位设计代码以更接近地匹配 bootstrap 示例。我不会遍历整个代码示例，但我会举几个例子：

1

在您的设计代码中，<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> 在 html 中生成了一组表单标签。那么，bootstrap 代码中匹配的表单标签在哪里？嗯，是 <form class="form-signin"> 和 </form>。因此，您需要做的是确保您设计的表单在其表单标签中添加了 form-signin class，因此它与 bootstrap 模板相匹配。 the form for doco 让您知道要添加 class，您可以这样做：

<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "form-signin"}) do |f| %>

（注意我把 class: "form-signin" 放在哪里）

好的。那是排序的表单标签。接下来，标签：

2

在设计示例中，字段包装在 <div class="field"> 块中。您的 bootstrap 模板根本没有它们 - 因此您可以删除它们。

在设计代码中，<%= f.label :email %><br /> 与 bootstrap 模板中的 <label for="inputEmail" class="sr-only">Email address</label> 匹配。那么，如何修改设计代码以生成与 bootstrap 模板相同的 html？那么，您需要从中删除 <br />，添加一个 'sr-only' class，并将标签文本更改为 'Email Address'。该文档将让您知道这可以通过以下方式完成：

<%= f.label :email, 'Email address', class: 'sr-only' %>

3

接下来，输入字段。您的设计代码中的 <%= f.email_field :email, autofocus: true %> 对应于您的 bootstrap 代码中的 <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>。所以，你只需要让你的设计代码添加一个form-control class。参考doco，或者google 'how to add a class to a rails form field'，你会发现可以这样做：

<%= f.email_field :email, autofocus: true, class: 'form-control' %>

一点一点地执行该过程，直到您的设计代码中的 html 具有使它看起来像 bootstrap 所需的所有 classes/修改] 例子。

最终结果

最终结果将如下所示：

<div class="container">
  <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "form-signin"}) do |f| %>
    <h2 class="form-signin-heading">Please sign in</h2>
    <%= f.label :email, 'Email Address', class: 'sr-only' %>
    <%= f.email_field :email, autofocus: true, class: 'form-control', placeholder: 'Email Address' %>

    <%= f.label :password, 'Password', class: 'sr-only' %>
    <%= f.password_field :password, autocomplete: "off", class: 'form-control', placeholder: 'Password' %>

    <% if devise_mapping.rememberable? -%>
      <label>
        <%= f.check_box :remember_me, label: false %>
        Remember me
      </label>
    <% end -%>

    <%= f.button "Sign in", class: 'btn btn-lg btn-primary btn-block' %>
  <% end %>
</div> <!-- /container -->

但不要只是 copy/paste。这样做会让你永远是初学者。自己一点一点地做，直到做对为止。如果你真的卡住了，把最后的结果作为参考。

祝你好运！

在 rails 中使用 bootstrap 设计登录

Devise login with bootstrap in rails

ruby-on-rails

devise

twitter-bootstrap

1

2

3

最终结果