Rails 3和Twitter bootstrap的侧边栏(附件) - 怎么样?

时间:2012-08-31 12:11:47

标签: ruby twitter-bootstrap haml ruby-on-rails-3.2 twitter-bootstrap-rails

我有一个简单的RoR 3.2应用程序与Twitter bootstrap 2.1.0(我通过twitter-bootstrap-rails gem实现它)。我想将侧栏与几个链接集成(正如你在左侧的twitter bootstrap页面上看到的那样)但我无法得到如何实现这一点(是的,我是菜鸟)。有人在Rails中有解决方法吗?

我的应用程序布局:

!!!
%html
  %head
    %title MyApp
    = stylesheet_link_tag    "application", :media => "all"
    = javascript_include_tag "application"
    = csrf_meta_tags
    %meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0"  }
  %body
    %div{ :class => "wrapper" }
      = render 'layouts/navbar_template'

      %div{ :class => "container-fluid" }
        - flash.each do |key, msg|
          %div{ :class => "alert alert-#{key}" }
            %button{ :type => "button", :class => "close", "data-dismiss" =>"alert" }×
            = msg
        %div{ :class => "row-fluid" }
          %div{:class => "span10"}
            =yield
          %div{:class => "span2"}
            -# I would like to have sidebar here

1 个答案:

答案 0 :(得分:0)

%ul.nav.nav-list.bs-docs-sidenav.affix
  %li.active
    %a{:href => "#dropdowns"}
      %i.icon-chevron-right
      Dropdowns
  %li
    %a{:href => "#buttonGroups"}
      %i.icon-chevron-right
      Button groups
  %li
    %a{:href => "#buttonDropdowns"}
      %i.icon-chevron-right
      Button dropdowns
  %li
    %a{:href => "#navs"}
      %i.icon-chevron-right
      Navs
  %li
    %a{:href => "#navbar"}
      %i.icon-chevron-right
      Navbar
  %li
    %a{:href => "#breadcrumbs"}
      %i.icon-chevron-right
      Breadcrumbs
  %li
    %a{:href => "#pagination"}
      %i.icon-chevron-right
      Pagination
  %li
    %a{:href => "#labels-badges"}
      %i.icon-chevron-right
      Labels and badges
  %li
    %a{:href => "#typography"}
      %i.icon-chevron-right
      Typography
  %li
    %a{:href => "#thumbnails"}
      %i.icon-chevron-right
      Thumbnails
  %li
    %a{:href => "#alerts"}
      %i.icon-chevron-right
      Alerts
  %li
    %a{:href => "#progress"}
      %i.icon-chevron-right
      Progress bars
  %li
    %a{:href => "#misc"}
      %i.icon-chevron-right
      Misc