Search code examples
rubytwitter-bootstraphamlruby-on-rails-3.2twitter-bootstrap-rails

Rails 3 and Twitter bootstrap's sidebar (affix) - how?


I have simple RoR 3.2 application with Twitter bootstrap 2.1.0 (i implemented it via twitter-bootstrap-rails gem). I want to integrate sidebar with few links (as you can see on twitter bootstrap page on the left side) but i can't get how to implement this (yes, i'm noob). Does anyone have solution how to do that in Rails?

My application layout:

!!!
%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

Solution

  • %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