#328 Twitter Bootstrap Basics

Feb 28, 2012 | 10 minutes | Views, Plugins

Twitter Bootstrap can help make beautiful web apps quickly by providing you with useful CSS and JavaScript. Here you will learn how to include it into Rails with the twitter-bootstrap-rails gem.

Click to Play Video ▶

Download:
source codeProject Files in Zip (52.1 KB)
mp4Full Size H.264 Video (32.3 MB)
m4vSmaller H.264 Video (14.4 MB)
webmFull Size VP8 Video (14.4 MB)
ogvFull Size Theora Video (35.7 MB)

Browse Source Code

Resources

Update February 6, 2013: The setup process for twitter-bootstrap-rails has changed since this episode. Check out the README for details on how to set it up.

          terminal
        
rails new store
rails g scaffold product name price:decimal --skip-stylesheets
rake db:migrate
rails g bootstrap:install
rails g bootstrap:themed products -f

          Gemfile
        
group :assets do
  gem 'twitter-bootstrap-rails'
end

          layouts/application.html.erb
        
<!DOCTYPE html>
<html>
<head>
  <title>Store</title>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
  <![endif]-->
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Some Store</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li><%= link_to "Browse Products", products_path %></li>
            <li><%= link_to "Price List" %></li>
            <li><%= link_to "Contact Us" %></li>
            <li><%= link_to "Cart" %></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="span9"><%= yield %></div>
      <div class="span3">
        <h2>About Us</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</body>
</html>

          app/assets/stylesheets/bootstrap_and_override.css.less
        
@import "twitter/bootstrap/bootstrap";

body { padding-top: 60px; }

@import "twitter/bootstrap/responsive";