HAML 和 HTML - 无法正确复制

Question

我正在尝试将 HTML Bootstrap 主题应用于我使用 HAML 的 Rails 应用程序。结果可以在这里找到：http://imgur.com/hhprZgh.

代码中似乎有些地方我没有正确转换。你能指出那些地方可能在哪里吗？我可以在控制台中看到所有 CSS 文件都已正确加载。现在不要介意字体。

谢谢！

（这是我正在使用的 Moltran 响应式管理主题）

HAML:

.wrapper-page
  .panel.panel-color.panel-primary.panel-pages
    .panel-heading.bg-img
      .bg-overlay
      %h3.text-center.m-t-10.text-white Sign In to Founderdocs
  .panel-body
    = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
      %fieldset.form-control.input-lg
        .col-xs-12
          = f.label :email
          = f.email_field :email, placeholder: User.human_attribute_name('email'), class: 'form-control'
      %fieldset.form-control.input-lg
        .col-xs-12
          = f.label :password
          = f.password_field :password, placeholder: User.human_attribute_name('password'), class: 'form-control'
      .form-group
        .col-xs-12
          - if devise_mapping.rememberable?
            .checkbox.checkbox-primary
              = f.label :remember_me do
                = f.check_box :remember_me
                Remember me
      .form-group.text-center.m-t-40
        .col-xs-12
          = f.submit t('.sign_in'), class: 'btn btn-primary'
      .form-group.m-t-30
        .col-sm-7
          %i.fa.fa-lock.m-r-5
            = render 'devise/shared/links'
        .col-sm-5.text-right
          %a{:href => "register.html"} Create an account

HTML:

<div class="wrapper-page">
    <div class="panel panel-color panel-primary panel-pages">
        <div class="panel-heading bg-img"> 
            <div class="bg-overlay"></div>
            <h3 class="text-center m-t-10 text-white"> Sign In to <strong>Moltran</strong> </h3>
        </div> 


        <div class="panel-body">
        <form class="form-horizontal m-t-20" action="index.html">

            <div class="form-group">
                <div class="col-xs-12">
                    <input class="form-control input-lg" type="text" required="" placeholder="Username">
                </div>
            </div>

            <div class="form-group">
                <div class="col-xs-12">
                    <input class="form-control input-lg" type="password" required="" placeholder="Password">
                </div>
            </div>

            <div class="form-group">
                <div class="col-xs-12">
                    <div class="checkbox checkbox-primary">
                        <input id="checkbox-signup" type="checkbox">
                        <label for="checkbox-signup">
                            Remember me
                        </label>
                    </div>

                </div>
            </div>

            <div class="form-group text-center m-t-40">
                <div class="col-xs-12">
                    <button class="btn btn-primary btn-lg w-lg waves-effect waves-light" type="submit">Log In</button>
                </div>
            </div>

            <div class="form-group m-t-30">
                <div class="col-sm-7">
                    <a href="recoverpw.html"><i class="fa fa-lock m-r-5"></i> Forgot your password?</a>
                </div>
                <div class="col-sm-5 text-right">
                    <a href="register.html">Create an account</a>
                </div>
            </div>
        </form> 
        </div>                                 

    </div>
</div>

Answer 1

这是您需要的 HAML，有一些变化，例如 'panel-body' 应该在 'panel-pages' div 内，等等。包含bootstrap-css，我最后在snippet.see中包含了link标签。

.wrapper-page
  .panel.panel-color.panel-primary.panel-pages
    .panel-heading.bg-img
      .bg-overlay
      %h3.text-center.m-t-10.text-white
        Sign In to
        %strong Moltran
    .panel-body
      %form.form-horizontal.m-t-20{:action => "index.html"}
        .form-group
          .col-xs-12
            %input.form-control.input-lg{:placeholder => "Username", :required => "", :type => "text"}
        .form-group
          .col-xs-12
            %input.form-control.input-lg{:placeholder => "Password", :required => "", :type => "password"}
        .form-group
          .col-xs-12
            .checkbox.checkbox-primary
              %input#checkbox-signup{:type => "checkbox"}
                %label{:for => "checkbox-signup"}
                  Remember me
        .form-group.text-center.m-t-40
          .col-xs-12
            %button.btn.btn-primary.btn-lg.w-lg.waves-effect.waves-light{:type => "submit"} Log In
        .form-group.m-t-30
          .col-sm-7
            %a{:href => "recoverpw.html"}
              %i.fa.fa-lock.m-r-5
              Forgot your password?
          .col-sm-5.text-right
            %a{:href => "register.html"} Create an account

%link(rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")

link 标签是 bootstrap css 到 load.Its 为我工作所必需的。

HAML 和 HTML - 无法正确复制

HAML and HTML - Cannot replicate it properly

html

css

ruby-on-rails

twitter-bootstrap

haml