Merge branch '2.0-wip' of github.com:twitter/bootstrap into 2.0-wip

Conflicts:
	bootstrap.css

8 files changed, 193 insertions, 206 deletions

diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 724daf9eb..eae84b138 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -1,83 +1,76 @@
 $(function(){
 
+  // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+  // IT'S ALL JUST JUNK FOR OUR DOCS!
+  // ++++++++++++++++++++++++++++++++++++++++++
+
   // Hide the Mobile Safari address bar once loaded
   // ==============================================
 
-  window.addEventListener("load",function() {
-    // Set a timeout...
-    setTimeout(function(){
-      // Hide the address bar!
-      window.scrollTo(0, 1);
-    }, 0);
-  });
-
-
-  // Docs topbar nav
-  // ===============
-
-  $('.nav .active').click(function(e) {
-    e.preventDefault();
-    $(this).siblings().toggle();
-  });
-
-
-  // Show grid dimensions on hover
-  // =============================
-
-  $('.show-grid > div').hover(function() {
-    var width = $(this).width();
-    $(this).attr('title', width);
-    $(this).twipsy();
-  });
-
+  // Set a timeout...
+  setTimeout(function(){
+    // Hide the address bar!
+    window.scrollTo(0, 1);
+  }, 0);
 
   // table sort example
   // ==================
 
-  $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } )
+  // make code pretty
+  window.prettyPrint && prettyPrint()
 
+  // table sort example
+  if ($.fn.tableSorter) {
+    $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } )
+  }
 
   // add on logic
-  // ============
-
-  $('.add-on :checkbox').click(function () {
-    if ($(this).attr('checked')) {
-      $(this).parents('.add-on').addClass('active')
-    } else {
-      $(this).parents('.add-on').removeClass('active')
-    }
+  $('.add-on :checkbox').on('click', function () {
+    var $this = $(this)
+      , method = $this.attr('checked') ? 'addClass' : 'removeClass'
+    $(this).parents('.add-on')[method]('active')
   })
 
-
   // Disable certain links in docs
-  // =============================
-  // Please do not carry these styles over to your projects, it's merely here to prevent button clicks form taking you away from your spot on page
+  // Please do not carry these styles over to your projects
+  // it's merely here to prevent button clicks form taking you
+  // away from your spot on page!!
 
-  $('ul.tabs a, ul.pills a, .pagination a, .well .btn, .actions .btn, .alert-message .btn, a.close').click(function (e) {
+  $('[href^=#]').click(function (e) {
     e.preventDefault()
   })
 
   // Copy code blocks in docs
-  $(".copy-code").focus(function () {
-    var el = this;
-    // push select to event loop for chrome :{o
-    setTimeout(function () { $(el).select(); }, 1);
-  });
-
-
-  // POSITION STATIC TWIPSIES
-  // ========================
-
-  $(window).on('load resize', function () {
-    $(".twipsies a").each(function () {
-       $(this)
-        .twipsy({
-          live: false
-        , placement: $(this).attr('title')
-        , trigger: 'manual'
-        , offset: 2
-        })
-        .twipsy('show')
-      })
+  $(".copy-code").on('focus', function () {
+    var el = this
+    setTimeout(function () { $(el).select() }, 0)
   })
-});
+
+  if ($.fn.twipsy) {
+
+    // position static twipsies for components page
+    if ($(".twipsies a").length) {
+      $(window).on('load resize', function () {
+        $(".twipsies a").each(function () {
+          $(this)
+            .twipsy({
+              placement: $(this).attr('title')
+            , trigger: 'manual'
+            })
+            .twipsy('show')
+          })
+      })
+    }
+
+    // add tipsies to grid for scaffolding
+    if ($('#grid-system').length) {
+
+      $('#grid-system').twipsy({
+          selector: '.show-grid > div'
+        , title: function () { return $(this).width() + 'px' }
+      })
+
+    }
+  }
+
+})
diff --git a/docs/base-css.html b/docs/base-css.html
index bb54b0c51..dad42381d 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1179,13 +1179,7 @@ Form states
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
-    <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
-    <script>$(function () { prettyPrint() })</script>
-    <script src="../js/bootstrap-transitions.js"></script>
-    <script src="../js/bootstrap-dropdown.js"></script>
-    <script src="../js/bootstrap-twipsy.js"></script>
-    <script src="../js/bootstrap-scrollspy.js"></script>
     <script src="assets/js/application.js"></script>
   </body>
 </html>
diff --git a/docs/components.html b/docs/components.html
index 2f359ab57..c6a349ff4 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -22,18 +22,6 @@
     <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
     <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
     <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
-
-    <!-- Le javascript -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
-    <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.js"></script>
-    <script>$(function () { prettyPrint() })</script>
-    <script src="../js/bootstrap-transitions.js"></script>
-    <script src="../js/bootstrap-dropdown.js"></script>
-    <script src="../js/bootstrap-twipsy.js"></script>
-    <script src="../js/bootstrap-scrollspy.js"></script>
-    <script src="assets/js/application.js"></script>
   </head>
 
   <body>
@@ -242,7 +230,7 @@
     <h1>Navbar</h1>
   </div>
   <h2>Fixed navbar</h2>
-  <div class="navbar navbar-static">
+  <div class="navbar navbar-static" >
     <div class="navbar-inner">
       <div class="container" style="width: auto;">
         <a class="brand" href="#">Project Name</a>
@@ -321,8 +309,8 @@
         <li><a href="#">Messages</a></li>
         <li><a href="#">Settings</a></li>
         <li><a href="#">Contact</a></li>
-        <li class="dropdown" data-dropdown="dropdown">
-          <a href="#" class="dropdown-toggle">Dropdown</a>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
           <ul class="dropdown-menu">
             <li><a href="#">Secondary link</a></li>
             <li><a href="#">Something else here</a></li>
@@ -344,11 +332,11 @@
       <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs&mdash;default (top), right, bottom, left&mdash;with example tab areas.</p>
 
       <div class="tabbable">
-        <ul class="tabs" data-tabs="tabs">
-          <li class="active"><a href="#1">Section 1</a></li>
-          <li><a href="#2">Section 2</a></li>
-          <li><a href="#3">Section 3</a></li>
-          <li><a href="#4">Section 4</a></li>
+        <ul class="tabs">
+          <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
+          <li><a href="#2" data-toggle="tab">Section 2</a></li>
+          <li><a href="#3" data-toggle="tab">Section 3</a></li>
+          <li><a href="#4" data-toggle="tab">Section 4</a></li>
         </ul>
         <div class="tab-content">
           <div class="tab-pane active" id="1">
@@ -369,21 +357,21 @@
        <div class="row">
         <div class="span4">
           <div class="tabbable tabs-left">
-            <ul class="tabs" data-tabs="tabs">
-              <li class="active"><a href="#1">Section 1</a></li>
-              <li><a href="#2">Section 2</a></li>
-              <li><a href="#3">Section 3</a></li>
+            <ul class="tabs">
+              <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li>
+              <li><a href="#6" data-toggle="tab">Section 2</a></li>
+              <li><a href="#7" data-toggle="tab">Section 3</a></li>
             </ul>
             <div class="tab-content" id="myTabContent2">
-              <div class="tab-pane active" id="1">
+              <div class="tab-pane active" id="5">
                 <h4>Section 1</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
-              <div class="tab-pane" id="2">
+              <div class="tab-pane" id="6">
                 <h4>Section 2</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
-              <div class="tab-pane" id="3">
+              <div class="tab-pane" id="7">
                 <h4>Section 3</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
@@ -392,21 +380,21 @@
         </div>
         <div class="span4 offset1">
           <div class="tabbable tabs-right">
-            <ul class="tabs" data-tabs="tabs">
-              <li class="active"><a href="#1">Section 1</a></li>
-              <li><a href="#2">Section 2</a></li>
-              <li><a href="#3">Section 3</a></li>
+            <ul class="tabs">
+              <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li>
+              <li><a href="#9" data-toggle="tab">Section 2</a></li>
+              <li><a href="#10" data-toggle="tab">Section 3</a></li>
             </ul>
             <div class="tab-content" id="myTabContent3">
-              <div class="tab-pane active" id="1">
+              <div class="tab-pane active" id="8">
                 <h4>Section 1</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
-              <div class="tab-pane" id="2">
+              <div class="tab-pane" id="9">
                 <h4>Section 2</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
-              <div class="tab-pane" id="3">
+              <div class="tab-pane" id="10">
                 <h4>Section 3</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
@@ -417,24 +405,24 @@
 
       <div class="tabbable tabs-bottom">
         <div class="tab-content">
-          <div class="tab-pane active" id="1">
+          <div class="tab-pane active" id="11">
             <p>Oh hai #1!</p>
           </div>
-          <div class="tab-pane" id="2">
+          <div class="tab-pane" id="12">
             <p>Oh hai #2!</p>
           </div>
-          <div class="tab-pane" id="3">
+          <div class="tab-pane" id="13">
             <p>Oh hai #3!</p>
           </div>
-          <div class="tab-pane" id="4">
+          <div class="tab-pane" id="14">
             <p>Oh hai #4!</p>
           </div>
         </div>
-        <ul class="tabs" data-tabs="tabs">
-          <li class="active"><a href="#1">Section 1</a></li>
-          <li><a href="#2">Section 2</a></li>
-          <li><a href="#3">Section 3</a></li>
-          <li><a href="#4">Section 4</a></li>
+        <ul class="tabs">
+          <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li>
+          <li><a href="#12" data-toggle="tab">Section 2</a></li>
+          <li><a href="#13" data-toggle="tab">Section 3</a></li>
+          <li><a href="#14" data-toggle="tab">Section 4</a></li>
         </ul>
       </div>
 
@@ -768,7 +756,7 @@
       <div class="twipsies well">
         <div style="position: relative">
           <p class="muted" style="margin-bottom: 0">
-Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
+Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="top">rem</a> quae aut veritatis quasi quae.
           </p>
         </div>
       </div>
@@ -811,9 +799,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
   </div><!-- /row -->
 </section>
 
-
-
-
       <!-- Footer
       ================================================== -->
       <footer class="footer">
@@ -823,5 +808,16 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
         <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
       </footer>
     </div><!-- /container -->
+
+    <!-- Le javascript -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
+    <script src="../js/bootstrap-transition.js"></script>
+    <script src="../js/bootstrap-dropdown.js"></script>
+    <script src="../js/bootstrap-tab.js"></script>
+    <script src="../js/bootstrap-scrollspy.js"></script>
+    <script src="../js/bootstrap-twipsy.js"></script>
+    <script src="assets/js/application.js"></script>
   </body>
 </html>
diff --git a/docs/index.html b/docs/index.html
index 9cad06271..0d340fa1a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -97,10 +97,10 @@
 
           <li class="divider">&middot;</li>
           <li class="follow-btn">
-            <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
+            <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a>
           </li>
           <li class="tweet-btn">
-            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
           </li>
         </ul>
 
@@ -217,8 +217,8 @@
 
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
     <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
     <script src="assets/js/application.js"></script>
-
   </body>
 </html>
diff --git a/docs/javascript.html b/docs/javascript.html
index bf27dd7f1..d5aebbacd 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -23,38 +23,6 @@
     <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">
 
-    <!-- Le javascript -->
-    <!-- placed up here so that the inline demos can be next to their markup -->
-    <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
-    <script src="../js/tests/vendor/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.js"></script>
-    <script>$(function () { prettyPrint() })</script>
-    <script src="../js/bootstrap-transition.js"></script>
-    <script src="../js/bootstrap-alert.js"></script>
-    <script src="../js/bootstrap-modal.js"></script>
-    <script src="../js/bootstrap-dropdown.js"></script>
-    <script src="../js/bootstrap-scrollspy.js"></script>
-    <script src="../js/bootstrap-tab.js"></script>
-    <script src="../js/bootstrap-twipsy.js"></script>
-    <script src="../js/bootstrap-popover.js"></script>
-    <script src="../js/bootstrap-button.js"></script>
-    <script src="../js/bootstrap-collapse.js"></script>
-    <script>
-      $(function () {
-        // twipsy demo
-        $('.twipsy-demo.well').twipsy({
-          selector: "a[rel=twipsy]"
-        })
-
-        //popover demo
-        $("a[rel=popover]")
-          .popover()
-          .click(function(e) {
-            e.preventDefault()
-          })
-      })
-    </script>
-
   </head>
 
   <body id="bootstrap-js">
@@ -576,8 +544,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              <tr>
                <td>placement</td>
                <td>string</td>
-               <td>'above'</td>
-               <td>how to position the tooltip - above | below | left | right</td>
+               <td>'top'</td>
+               <td>how to position the tooltip - top | bottom | left | right</td>
              </tr>
              <tr>
                <td>selector</td>
@@ -667,7 +635,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>placement</td>
                <td>string</td>
                <td>'right'</td>
-               <td>how to position the popover - above | below | left | right</td>
+               <td>how to position the popover - top | bottom | left | right</td>
              </tr>
              <tr>
                <td>selector</td>
@@ -750,6 +718,30 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h4>.alert('close')</h4>
           <p>Closes an alert.</p>
           <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
+          <h3>Events</h3>
+          <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
+          <table class="zebra-striped">
+            <thead>
+             <tr>
+               <th style="width: 150px;">Event</th>
+               <th>Description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>close</td>
+               <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+             </tr>
+             <tr>
+               <td>closed</td>
+               <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
+             </tr>
+            </tbody>
+          </table>
+<pre class="prettyprint linenums">
+$('#my-alert').bind('closed', function () {
+  // do something ...
+})</pre>
           <h3>Demo</h3>
           <div class="alert-message warning fade in">
             <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -828,16 +820,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                   <button id="fat-btn" data-loading-text="loading..." class="btn">
                     Loading State
                   </button>
-                  <script>
-                    $(function() {
-                      var btn = $('#fat-btn').click(function () {
-                        btn.button('loading')
-                        setTimeout(function () {
-                          btn.button('reset')
-                        }, 3000)
-                      })
-                    })
-                  </script>
                 </td>
              </tr>
              <tr>
@@ -1029,5 +1011,47 @@ $('#myCollapsible').on('hidden', function () {
         <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
       </footer>
     </div><!-- /container -->
+
+
+    <!-- Le javascript -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
+    <script src="../js/tests/vendor/jquery.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
+    <script src="../js/bootstrap-transition.js"></script>
+    <script src="../js/bootstrap-alert.js"></script>
+    <script src="../js/bootstrap-modal.js"></script>
+    <script src="../js/bootstrap-dropdown.js"></script>
+    <script src="../js/bootstrap-scrollspy.js"></script>
+    <script src="../js/bootstrap-tab.js"></script>
+    <script src="../js/bootstrap-twipsy.js"></script>
+    <script src="../js/bootstrap-popover.js"></script>
+    <script src="../js/bootstrap-button.js"></script>
+    <script src="../js/bootstrap-collapse.js"></script>
+    <script src="assets/js/application.js"></script>
+    <script>
+      $(function () {
+        // twipsy demo
+        $('.twipsy-demo.well').twipsy({
+          selector: "a[rel=twipsy]"
+        })
+
+        //popover demo
+        $("a[rel=popover]")
+          .popover()
+          .click(function(e) {
+            e.preventDefault()
+          })
+
+        $('#fat-btn')
+          .click(function () {
+            var btn = $(this)
+            btn.button('loading')
+            setTimeout(function () {
+              btn.button('reset')
+            }, 3000)
+          })
+      })
+    </script>
   </body>
 </html>
diff --git a/docs/less.html b/docs/less.html
index e004bc24c..7d3efd296 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -467,13 +467,7 @@
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
-    <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
-    <script>$(function () { prettyPrint() })</script>
-    <script src="../js/bootstrap-transitions.js"></script>
-    <script src="../js/bootstrap-dropdown.js"></script>
-    <script src="../js/bootstrap-twipsy.js"></script>
-    <script src="../js/bootstrap-scrollspy.js"></script>
     <script src="assets/js/application.js"></script>
   </body>
 </html>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 473553412..0a46252dd 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -64,34 +64,34 @@
 
   <h2>Default 940px grid</h2>
   <div class="row show-grid">
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
-    <div class="span1" title="60px">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
   </div>
   <div class="row show-grid">
-    <div class="span4" title="300px">4</div>
-    <div class="span4" title="300px">4</div>
-    <div class="span4" title="300px">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
   </div>
   <div class="row show-grid">
-    <div class="span4" title="300px">4</div>
-    <div class="span8" title="620px">8</div>
+    <div class="span4">4</div>
+    <div class="span8">8</div>
   </div>
   <div class="row show-grid">
-    <div class="span6" title="460px">6</div>
-    <div class="span6" title="460px">6</div>
+    <div class="span6">6</div>
+    <div class="span6">6</div>
   </div>
   <div class="row show-grid">
-    <div class="span12" title="940px">12</div>
+    <div class="span12">12</div>
   </div>
 
   <div class="row">
@@ -358,7 +358,6 @@
 </section>
 
 
-
       <!-- Footer
       ================================================== -->
       <footer class="footer">
@@ -372,13 +371,10 @@
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
-    <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
-    <script>$(function () { prettyPrint() })</script>
-    <script src="../js/bootstrap-transitions.js"></script>
-    <script src="../js/bootstrap-dropdown.js"></script>
+    <script src="../js/bootstrap-transition.js"></script>
     <script src="../js/bootstrap-twipsy.js"></script>
-    <script src="../js/bootstrap-scrollspy.js"></script>
     <script src="assets/js/application.js"></script>
+
   </body>
 </html>
diff --git a/docs/upgrading.html b/docs/upgrading.html
index 3e5a14a8a..7be1fd708 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -99,6 +99,7 @@
       <li>Added button bar options</li>
     </ul>
   </li>
+</ul>
 <!--
   <li>
     <ul>
@@ -119,16 +120,5 @@
       </footer>
     </div><!-- /container -->
 
-    <!-- Le javascript -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
-    <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.js"></script>
-    <script>$(function () { prettyPrint() })</script>
-    <script src="../js/bootstrap-transitions.js"></script>
-    <script src="../js/bootstrap-dropdown.js"></script>
-    <script src="../js/bootstrap-twipsy.js"></script>
-    <script src="../js/bootstrap-scrollspy.js"></script>
-    <script src="assets/js/application.js"></script>
   </body>
 </html>