Twitter Bootstrap.js Tabs says "ReferenceError: Can't find variable: $"

I am new to JS and find the whole paradigm quite confusing.

In trying to implement Twitter's Bootstrap.js library, I have tried to follow their instructions but have had absolutely no luck.

Basically, I want to use the tabs plugin. This is exactly my markup, and the JS console keeps saying: ReferenceError: Can't find variable: $

I gather that perhaps I am not loading jQuery here correctly, but... I don't know how I would do this any differently! Any assistance would be appreciated.

<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
  <script src="http://twitter.github.com/bootstrap/1.3.0/bootstrap-tabs.js"></script>

<![endif]-->

&l开发者_如何学Got;!-- Le styles -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<style type="text/css">
  body {
    padding-top: 60px;
  }
</style>

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

<div class="topbar">
  <div class="topbar-inner">
    <div class="container-fluid">
      <a class="brand" href="#">Project Name</a>
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <p class="pull-right">Logged in as <a href="#">username</a></p>
    </div>
  </div>
</div>

<div class="container-fluid">
   <div class="content">

        <ul class="tabs">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#profile">Profile</a></li>
          <li><a href="#messages">Messages</a></li>
          <li><a href="#settings">Settings</a></li>
        </ul>

        <div class="pill-content">
          <div class="active" id="home">Div 1</div>
          <div id="profile">Div 2</div>
          <div id="messages">Div 3</div>
          <div id="settings">Div 4</div>
        </ul>

        <script>
          $(function () {
            $('.tabs').tabs()
          })
        </script>   
    </div>
  </div>
</div>

you need to add jquery.js first

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<script src="http://twitter.github.com/bootstrap/1.3.0/bootstrap-tabs.js"></script>