Skip to content

Step05: Installing and Setting Up Bootstrap

Jump to bottom Edit New page
Lev Brie edited this page Jul 27, 2013 · 11 revisions

This comes almost entirely from Railscast #328 and #329 Note: Once installed, the twitter-bootstrap-rails gem is capable of generating bootstrap themed scaffolding using rails g bootstrap:themed table_name (table_name as in "products") with an optional -f to force rewriting over previously generated scaffolding.

  1. Make sure you have gem 'less-rails' and gem 'twitter-bootstrap-rails' in your Gemfile and run $ bundle install.

  2. Run $ rails g bootstrap:install from the terminal.

  3. Add a div with a class of container-fluid to your application.html.erb file:

    <body class="<%= controller_name %> <%= action_name %>">
  <div class="container-fluid">
    <%= yield %>		
  </div>
</body>

  4. Add a navigation partial file views/layouts/_header.html.haml and render it just above the fluid container div using <%= render 'layouts/header' %>.

  5. Add the navbar to the nav partial:

    %header.navbar.navbar-fixed-top
  .navbar-inner
    .container-fluid
      %a.btn.btn-navbar{"data-target" => ".nav-collapse", "data-toggle" => "collapse"}
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      %a.brand{:href => "#"} Rangular
      .nav-collapse
        %ul.nav
          %li= link_to "Browse Rangular"
          %li= link_to "About"
          %li= link_to "Contact"

  6. Add padding to the top of the body at the top of assets/stylesheets/bootstrap_and_overrides.css.less so that the fixed navbar doesn't obscure our content:

    @import "twitter/bootstrap/bootstrap";
body { padding-top: 60px; }     // padding added to top so that content isn't 
				    // obscured by navbar
@import "twitter/bootstrap/responsive";

  7. Add Google's HTML5 shim for supporting older version of Internet Explorer to a shared shim erb file views/shared/_shim.html.erb:

    <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

  8. Add meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> to application.html.erb just under <%= csrf_meta_tags %> to fix responsive behavior on mobile devices.

  9. Add Bootstrap-style flash messages to a views/shared/_errors.html.haml partial:

    - flash.each do |name, msg|
  %div{:class => "alert alert-#{name == :notice ? "success" : "error"}"}
    = msg

  10. Add a bootstrap.js.coffee file to the javascripts directory to load popover, tooltip, and modal functionality (in this case specifically intended for a contact modal):

    jQuery ->
  $("a[rel=popover]").popover()
  $(".tooltip").tooltip()
  $("a[rel=tooltip]").tooltip()
  $("#contactModal").modal
    keyboard: false
    show: false

  11. Optionally, to add a contact modal, add the following to the bootstrap.js.coffee file directly beneath the last line (and tabbed in):

    jQuery ->
  ...
  $("#contactModal").modal
    keyboard: false
    show: false

Now add in a <%= render 'shared/modal_contact' %> immediately below the header and in a views/shared/_modal_contact.html.haml file add:

```haml
    / modal contact partial - we prefer to identify first by function in partial names
    #contactModal.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "contactModalLabel", :role => "dialog", :tabindex => "-1"}
      .modal-body
        = link_to "", root_path, class: 'logo'
        %h5 CONTACT RANGULAR
        %form.form-horizontal
          .control-group
            .controls
              %input#inputName{:placeholder => "Input Your Full Name", :type => "text"}/
          .control-group
            .controls
              %input#inputEmail{:placeholder => "Your Email", :type => "text"}/
          .btn-wrapper
            %button.btn.btn-primary{:type => "submit"} Send
        %button#close.btn{"data-dismiss" => "modal"} Close
```

and link to it in layouts/_header.html.haml, replacing the current contact link:

```haml
%li
  %a{"data-toggle" => "modal", :href => "#contactModal"} Contact
```
Add a custom footer
Add a custom sidebar
Clone this wiki locally