Haml Bootstrap 搜索表单答案

【问题标题】：Haml Bootstrap search formHaml Bootstrap 搜索表单
【发布时间】：2012-06-02 15:55:01
【问题描述】：

我的导航栏代码如下所示：

%header.navbar.navbar-fixed-top
  %div.navbar-inner
    %div.container
      %nav
        %ul.nav.pull-right
          - if user_signed_in?
            %li= link_to "Sign out", '#'
          - else
            %li= link_to "Sign in", '#'

我正在尝试让我的导航栏在 Bootstrap 导航栏页面中看起来像 here 所示，但是我不知道如何翻译

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

进入哈姆尔。我的最后一次尝试看起来像：

%header.navbar.navbar-fixed-top
  %div.navbar-inner
    %div.container
      %nav
        %ul.nav.pull-right
         %form.navbar-search
           %input.search-query
             - { :type => "text", :placeholder => "Search" }
         - if user_signed_in?
            %li= link_to "Sign out", '#'
          - else
            %li= link_to "Sign in", '#'

虽然搜索栏出现了正确的 CSS 类，但当我检查它时，我的 html 中不存在 :type => "text" 和 :placeholder => "Search" 部分。我怎样才能解决这个问题？谢谢！

== 编辑 ==

也许是为了让这一点更清楚 - 我在 rails 3 应用程序中使用它，我意识到我可能应该使用 form_tag，但我不确定如何继续。

【问题讨论】：

标签： ruby-on-rails-3 twitter-bootstrap haml

【解决方案1】：

它应该像这样工作：

%header.navbar.navbar-fixed-top
  %nav.navbar-inner
    .container
      %ul.nav
        - if user_signed_in?
          %li= link_to "Sign out", '#'
        - else
          %li= link_to "Sign in", '#'
      = form_tag some_path, :class => "navbar-search pull-left", :method => :get do
        = text_field_tag :name, nil, :class => "search-query span3", :placeholder => "Search"

注意缩进。

我还建议您尝试从 rails 应用程序模板和教程开始：http://railsapps.github.com/。对于初学者来说，这将是一个很好的例子，说明设置什么、如何设置以及它应该是什么样子。

【讨论】：