Question

我想我在这里有一个简单的问题，但似乎无法找到答案。

我使用了来自bootsnipp.com的Bootstrap 3登录表单HTML / CSS / Javascript，现在正在对其进行转换，以便它可以与我现有的haml / simple_form / Rails 4应用程序一起使用。

我的原始代码是

  = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
  .form-inputs
    = f.input :email, :required => false, :autofocus => true
    = f.input :password, :required => false
    = f.input :remember_me, :as => :boolean if devise_mapping.rememberable?
  .form-actions
    = f.button :submit, "Sign in"
= render "devise/shared/links"

我试图将其纳入新代码

.container  
  #loginbox.mainbox.col-md-6.col-md-offset-3.col-sm-8.col-sm-offset-2{style: "margin-top:50px;"}
    .panel.panel-info
      .panel-heading
        .panel-title Sign In
        %div{style: "float:right; font-size: 80%; position: relative; top:-10px"}
          = link_to "Forgot your password?", new_password_path(resource_name)
      .panel-body{style: "padding-top:30px"}
        #login-alert.alert.alert-danger.col-sm-12{style: "display:none"}
        %form#loginform.form-horizontal{role: "form"}
          .input-group{style: "margin-bottom: 25px"}
            %span.input-group-addon
              %i.glyphicon.glyphicon-user
            %input#login-username.form-control{name: "username", placeholder: "username or email", type: "text", value: ""}/
          .input-group{style: "margin-bottom: 25px"}
            %span.input-group-addon
              %i.glyphicon.glyphicon-lock
            %input#login-password.form-control{name: "password", placeholder: "password", type: "password"}/
          .input-group
            .checkbox
              %label
                %input#login-remember{name: "remember", type: "checkbox", value: "1"}/
                Remember me
          .form-group{style: "margin-top:10px"}
            / Button
            .col-sm-12.controls
              = link_to session_path(resource_name) do
                #btn-login.btn.btn-success Login

我想出了忘记的密码位，因为它只是抛出link_to来替换％a标签，但我被困在simple_form_for（资源......位。

具体来说，对于像这样的行

= f.input :password, label: false, :required => false

如何添加bootstrap行中的内容

%input#login-password.form-control{name: "password", placeholder: "password", type: "password"}/

所以我想添加div类＆＃39;输入＆＃39;，id＆＃39; login-password＆＃39;和班级形式控制＆＃39;到我的simple_form代码。我已经尝试了:html => {:class => 'form-horizontal' }和input_html: { class: 'special' }，但它似乎无法正常工作，如果您应用多个类，ID等，Github上的解释并未指定规则是否会更改到一行代码。

自发布此问题以来，我在转换的一半时间，我的当前代码看起来像

    .container  
  #loginbox.mainbox.col-md-6.col-md-offset-3.col-sm-8.col-sm-offset-2{style: "margin-top:50px;"}
    .panel.panel-info
      .panel-heading
        .panel-title Sign In
        %div{style: "float:right; font-size: 80%; position: relative; top:-10px"}
          = link_to "Forgot your password?", new_password_path(resource_name)
      .panel-body{style: "padding-top:30px"}
        #login-alert.alert.alert-danger.col-sm-12{style: "display:none"}
        = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
          %form#loginform.form-horizontal{role: "form"}
            .input-group{style: "margin-bottom: 25px"}
              %span.input-group-addon
                %i.glyphicon.glyphicon-user
              = f.input :email, :required => false, label: false, :autofocus => true, placeholder: '@usgboral.com', input_html: { class: 'form-control' }
            .input-group{style: "margin-bottom: 25px"}
              %span.input-group-addon
                %i.glyphicon.glyphicon-lock
              = f.input :password, label: false, :required => false
            .input-group
              .checkbox
                %label
                %input#login-remember{name: "remember", type: "checkbox", value: "1"}/
                = f.input :remember_me, :html => {:id => 'login-remember' }, :as => :boolean if devise_mapping.rememberable?
                Remember me
            .form-group{style: "margin-top:10px"}
              .form-actions.col-sm-12.controls
                = f.button :submit, "Login", :html => { :id => 'btn-login', :class => 'btn btn-success' }

Answer 1

.container  
  #loginbox.mainbox.col-md-6.col-md-offset-3.col-sm-8.col-sm-offset-2{style: "margin-top:50px;"}
    .panel.panel-info
      .panel-heading
        .panel-title Login
        %div{style: "float:right; font-size: 80%; position: relative; top:-10px"}
          = link_to "Forgot your password?", new_password_path(resource_name)
      .panel-body{style: "padding-top:30px"}
        #login-alert.alert.alert-danger.col-sm-12{style: "display:none"}
        = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
          %form#loginform.form-horizontal{role: "form"}
            .input-group{style: "margin-bottom: 25px"}
              %span.input-group-addon
                %i.glyphicon.glyphicon-user
              = f.input :email, :required => false, label: false, :autofocus => true, placeholder: 'username or email', input_html: { class: 'form-control' }
            .input-group{style: "margin-bottom: 25px"}
              %span.input-group-addon
                %i.glyphicon.glyphicon-lock
              = f.input :password, label: false, :required => false
            -#.input-group
              .checkbox
                %label#login-remember
                  = f.input :remember_me, class: "input", type: "checkbox", :as => :boolean if devise_mapping.rememberable?
            .form-group{style: "margin-top:10px"}
              .form-actions.col-sm-12.controls
                = f.button :submit, "Login", id: "btn", class: "btn btn-success"

使用Rails 4上的haml将Bootstrap 3集成到simple_form中

1 个答案: