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

Conflicts: docs/assets/css/docs.css docs/javascript.html docs/templates/pages/javascript.mustache

Merge branch '2.1.0-wip' of https://github.com/twitter/bootstrap into 2.1.0-wip
Conflicts: docs/assets/css/docs.css docs/javascript.html docs/templates/pages/javascript.mustache
5b2f2ed8 · Jacob Thornton · 4ea7c472 · 7ce048bc · 5b2f2ed8 · 5b2f2ed8
Commit 5b2f2ed8 authored Jul 24, 2012 by Jacob Thornton
25 changed files
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ Versioning

 For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible.

-Releases will be numbered with the follow format:
+Releases will be numbered with the following format:

 `<major>.<minor>.<patch>`


--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3686,15 +3686,21 @@ input[type="submit"].btn.btn-mini {
 }

 .nav-tabs.nav-stacked > li:first-child > a {
-  -webkit-border-radius: 4px 4px 0 0;
-     -moz-border-radius: 4px 4px 0 0;
-          border-radius: 4px 4px 0 0;
+  -webkit-border-top-right-radius: 4px;
+          border-top-right-radius: 4px;
+  -webkit-border-top-left-radius: 4px;
+          border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -moz-border-radius-topleft: 4px;
 }

 .nav-tabs.nav-stacked > li:last-child > a {
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
+  -webkit-border-bottom-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -moz-border-radius-bottomleft: 4px;
 }

 .nav-tabs.nav-stacked > li > a:hover {

--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -29,6 +29,9 @@ h3 code {

 body > .navbar-fixed-top {
  font-size: 13px;
+  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.15);
+     -moz-box-shadow: 0 5px 15px rgba(0,0,0,.15);
+          box-shadow: 0 5px 15px rgba(0,0,0,.15);
 }

 /* Change the docs' brand */
@@ -407,6 +410,8 @@ hr.soften {
 /* Custom, larger checkbox labels */
 .download .checkbox {
  padding: 6px 10px 6px 25px;
+  font-size: 13px;
+  line-height: 18px;
  color: #555;
  background-color: #f9f9f9;
  -webkit-border-radius: 3px;
@@ -964,3 +969,34 @@ form.bs-docs-example {
    width: auto;
  }
 }
+
+@media (min-width: 979px) {
+  .masthead,
+  .subhead {
+    position: fixed;
+    top: 40px;
+    right: 0;
+    left: 0;
+  }
+  .masthead {
+    height: 380px;
+  }
+  .subhead {
+    height: 130px; /* +80px pdding */
+  }
+  .bs-docs-canvas {
+    position: absolute;
+    width: 100%;
+    z-index: 10;
+    background-color: #fff;
+    -webkit-box-shadow: 0 -5px 15px rgba(0,0,0,.15);
+       -moz-box-shadow: 0 -5px 15px rgba(0,0,0,.15);
+            box-shadow: 0 -5px 15px rgba(0,0,0,.15);
+  }
+  .masthead + .bs-docs-canvas {
+    top: 530px;
+  }
+  .subhead + .bs-docs-canvas {
+    top: 250px;
+  }
+}
\ No newline at end of file
--- a/docs/assets/js/bootstrap-affix.js
+++ b/docs/assets/js/bootstrap-affix.js
--- a/docs/assets/js/bootstrap-transition.js
+++ b/docs/assets/js/bootstrap-transition.js
@@ -36,7 +36,7 @@
          , transEndEventNames = {
               'WebkitTransition' : 'webkitTransitionEnd'
            ,  'MozTransition'    : 'transitionend'
-            ,  'OTransition'      : 'otransitionend'
+            ,  'OTransition'      : 'oTransitionEnd otransitionend'
            ,  'msTransition'     : 'MSTransitionEnd'
            ,  'transition'       : 'transitionend'
            }

--- a/docs/assets/js/bootstrap.js
+++ b/docs/assets/js/bootstrap.js
@@ -36,7 +36,7 @@
          , transEndEventNames = {
               'WebkitTransition' : 'webkitTransitionEnd'
            ,  'MozTransition'    : 'transitionend'
-            ,  'OTransition'      : 'otransitionend'
+            ,  'OTransition'      : 'oTransitionEnd otransitionend'
            ,  'msTransition'     : 'MSTransitionEnd'
            ,  'transition'       : 'transitionend'
            }

--- a/docs/assets/js/bootstrap.min.js
+++ b/docs/assets/js/bootstrap.min.js
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -78,14 +78,15 @@
  </div>
 </header>

-<div class="container">
+<div class="bs-docs-canvas">

+  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#typography">Typography <i class="icon-chevron-right"></i></a></li>
          <li><a href="#code">Code <i class="icon-chevron-right"></i></a></li>
          <li><a href="#tables">Tables <i class="icon-chevron-right"></i></a></li>
@@ -1305,9 +1306,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
          <form class="bs-docs-example form-inline">
            <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
          </form>
-<pre class="prettyprint linenums">
-&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
-</pre>
+  <pre class="prettyprint linenums">
+  &lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
+  </pre>

          <h3>Disabled inputs</h3>
          <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
@@ -1754,6 +1755,8 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
      </div>
    </div>

+  </div>
+
 </div>



--- a/docs/components.html
+++ b/docs/components.html
@@ -78,14 +78,15 @@
  </div>
 </header>

-<div class="container">
+<div class="bs-docs-canvas">

+  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#dropdowns">Dropdowns <i class="icon-chevron-right"></i></a></li>
          <li><a href="#buttonGroups">Button groups <i class="icon-chevron-right"></i></a></li>
          <li><a href="#buttonDropdowns">Button dropdowns <i class="icon-chevron-right"></i></a></li>
@@ -1834,13 +1835,9 @@

          <h3>Dismiss buttons</h3>
          <p>Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code>&lt;a&gt;</code> tag.</p>
-<pre class="prettyprint linenums">
-&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
-</pre>
+          <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
          <p>Alternatively, you may use a <code>&lt;button&gt;</code> element with the data attribute, which we have opted to do for our docs. When using <code>&lt;button&gt;</code>, you must include <code>type="button"</code> or your forms may not submit.</p>
-<pre class="prettyprint linenums">
-&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
-</pre>
+          <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>

          <h3>Dismiss alerts via javascript</h3>
          <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
@@ -2087,14 +2084,15 @@
  ...
 &lt;/div&gt;
 </pre>
+
          <h2>Close icon</h2>
          <p>Use the generic close icon for dismissing content like modals and alerts.</p>
          <div class="bs-docs-example">
            <p><button class="close" style="float: none;">&times;</button></p>
          </div>
-<pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
+          <pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
          <p>iOS devices require an href="#" for click events if you rather use an anchor.</p>
-<pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
+          <pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>

          <h2>Helper classes</h2>
          <p>Simple, focused classes for small display or behavior tweaks.</p>
@@ -2158,6 +2156,8 @@ class="clearfix"
      </div>
    </div>

+  </div>
+
 </div>



--- a/docs/customize.html
+++ b/docs/customize.html
@@ -74,18 +74,19 @@
 <header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>Customize and download</h1>
-    <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p>
+    <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.</p>
  </div>
 </header>

-<div class="container">
+<div class="bs-docs-canvas">

+  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#components">1. Choose components</a></li>
          <li><a href="#plugins">2. Select jQuery plugins</a></li>
          <li><a href="#variables">3. Customize variables</a></li>
@@ -95,7 +96,6 @@
      <div class="span9">


-
        <!-- Customize form
        ================================================== -->
        <form>
@@ -134,8 +134,6 @@
                <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> Alerts</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> Progress bars</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> Hero unit</label>
-            </div><!-- /span -->
-            <div class="span3">
                <h3>JS Components</h3>
                <label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> Tooltips</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label>
@@ -168,7 +166,7 @@
              </h1>
            </div>
            <div class="row download-builder">
-            <div class="span4">
+              <div class="span3">
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-transition.js">
                  Transitions <small>(required for any animation)</small>
@@ -194,7 +192,7 @@
                  Tooltips
                </label>
              </div><!-- /span -->
-            <div class="span4">
+              <div class="span3">
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-popover.js">
                  Popovers <small>(requires Tooltips)</small>
@@ -220,7 +218,7 @@
                  Typeahead
                </label>
              </div><!-- /span -->
-            <div class="span4">
+              <div class="span3">
                <h4 class="muted">Heads up!</h4>
                <p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
              </div><!-- /span -->
@@ -429,6 +427,8 @@
      </div>
    </div>

+  </div>
+
 </div>



--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -78,12 +78,15 @@
  </div>
 </header>

-<div class="container">
+<div class="bs-docs-canvas">

+  <div class="container">

+    <!-- Docs nav
+    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#download-bootstrap">Download <i class="icon-chevron-right"></i></a></li>
          <li><a href="#file-structure">File structure <i class="icon-chevron-right"></i></a></li>
          <li><a href="#contents">What's included <i class="icon-chevron-right"></i></a></li>
@@ -282,6 +285,8 @@
      </div>
    </div>

+  </div>
+
 </div>



--- a/docs/index.html
+++ b/docs/index.html
@@ -82,7 +82,9 @@
  </div>
 </div>

-<div class="bs-docs-social">
+<div class="bs-docs-canvas">
+
+  <div class="bs-docs-social">
    <div class="container">
      <ul class="bs-docs-social-buttons">
        <li>
@@ -99,9 +101,9 @@
        </li>
      </ul>
    </div>
-</div>
+  </div>

-<div class="container">
+  <div class="container">

    <div class="marketing">

@@ -155,7 +157,9 @@
        </ul>
       </div>

-  </div><!-- /.marketing -->
+    </div>
+
+  </div>

 </div>


--- a/docs/javascript.html
+++ b/docs/javascript.html
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -78,15 +78,15 @@
  </div>
 </header>

+<div class="bs-docs-canvas">

-<div class="container">
-
+  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#global">Global styles <i class="icon-chevron-right"></i></a></li>
          <li><a href="#gridSystem">Grid system <i class="icon-chevron-right"></i></a></li>
          <li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right"></i></a></li>
@@ -539,6 +539,8 @@
      </div>
    </div>

+  </div>
+
 </div>



--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -7,14 +7,15 @@
  </div>
 </header>

-<div class="container">
+<div class="bs-docs-canvas">

+  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#typography">{{_i}}Typography{{/i}} <i class="icon-chevron-right"></i></a></li>
          <li><a href="#code">{{_i}}Code{{/i}} <i class="icon-chevron-right"></i></a></li>
          <li><a href="#tables">{{_i}}Tables{{/i}} <i class="icon-chevron-right"></i></a></li>
@@ -1242,9 +1243,9 @@
          <form class="bs-docs-example form-inline">
            <input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
          </form>
-<pre class="prettyprint linenums">
-&lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
-</pre>
+  <pre class="prettyprint linenums">
+  &lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
+  </pre>

          <h3>{{_i}}Disabled inputs{{/i}}</h3>
          <p>{{_i}}Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.{{/i}}</p>
@@ -1691,4 +1692,6 @@
      </div>{{! /span9 }}
    </div>{{! row}}

-</div>{{! /container }}
+  </div>{{! /.container }}
+
+</div>{{! /.bs-docs-canvas }}
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -7,14 +7,15 @@
  </div>
 </header>

-<div class="container">
+<div class="bs-docs-canvas">

+  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#dropdowns">{{_i}}Dropdowns{{/i}} <i class="icon-chevron-right"></i></a></li>
          <li><a href="#buttonGroups">{{_i}}Button groups{{/i}} <i class="icon-chevron-right"></i></a></li>
          <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}} <i class="icon-chevron-right"></i></a></li>
@@ -1763,13 +1764,9 @@

          <h3>{{_i}}Dismiss buttons{{/i}}</h3>
          <p>{{_i}}Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code>&lt;a&gt;</code> tag.{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
-</pre>
+          <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
          <p>{{_i}}Alternatively, you may use a <code>&lt;button&gt;</code> element with the data attribute, which we have opted to do for our docs. When using <code>&lt;button&gt;</code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
-</pre>
+          <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>

          <h3>{{_i}}Dismiss alerts via javascript{{/i}}</h3>
          <p>{{_i}}Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.{{/i}}</p>
@@ -2016,14 +2013,15 @@
  ...
 &lt;/div&gt;
 </pre>
+
          <h2>{{_i}}Close icon{{/i}}</h2>
          <p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
          <div class="bs-docs-example">
            <p><button class="close" style="float: none;">&times;</button></p>
          </div>
-<pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
+          <pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
          <p>{{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}</p>
-<pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
+          <pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>

          <h2>{{_i}}Helper classes{{/i}}</h2>
          <p>{{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}</p>
@@ -2087,4 +2085,6 @@ class="clearfix"
      </div>{{! /span9 }}
    </div>{{! row}}

-</div>{{! /container }}
+  </div>{{! /.container }}
+
+</div>{{! /.bs-docs-canvas }}
--- a/docs/templates/pages/customize.mustache
+++ b/docs/templates/pages/customize.mustache
@@ -3,18 +3,19 @@
 <header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>{{_i}}Customize and download{{/i}}</h1>
-    <p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p>
+    <p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.{{/i}}</p>
  </div>
 </header>

-<div class="container">
+<div class="bs-docs-canvas">

+  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#components">{{_i}}1. Choose components{{/i}}</a></li>
          <li><a href="#plugins">{{_i}}2. Select jQuery plugins{{/i}}</a></li>
          <li><a href="#variables">{{_i}}3. Customize variables{{/i}}</a></li>
@@ -24,7 +25,6 @@
      <div class="span9">


-
        <!-- Customize form
        ================================================== -->
        <form>
@@ -63,8 +63,6 @@
                <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> {{_i}}Alerts{{/i}}</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> {{_i}}Progress bars{{/i}}</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> {{_i}}Hero unit{{/i}}</label>
-            </div><!-- /span -->
-            <div class="span3">
                <h3>{{_i}}JS Components{{/i}}</h3>
                <label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> {{_i}}Tooltips{{/i}}</label>
                <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> {{_i}}Popovers{{/i}}</label>
@@ -97,7 +95,7 @@
              </h1>
            </div>
            <div class="row download-builder">
-            <div class="span4">
+              <div class="span3">
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-transition.js">
                  {{_i}}Transitions <small>(required for any animation)</small>{{/i}}
@@ -123,7 +121,7 @@
                  {{_i}}Tooltips{{/i}}
                </label>
              </div><!-- /span -->
-            <div class="span4">
+              <div class="span3">
                <label class="checkbox">
                  <input type="checkbox" checked="true" value="bootstrap-popover.js">
                  {{_i}}Popovers <small>(requires Tooltips)</small>{{/i}}
@@ -149,7 +147,7 @@
                  {{_i}}Typeahead{{/i}}
                </label>
              </div><!-- /span -->
-            <div class="span4">
+              <div class="span3">
                <h4 class="muted">{{_i}}Heads up!{{/i}}</h4>
                <p class="muted">{{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.{{/i}}</p>
              </div><!-- /span -->
@@ -358,4 +356,6 @@
      </div>{{! /span9 }}
    </div>{{! row}}

-</div>{{! /container }}
+  </div>{{! /.container }}
+
+</div>{{! /.bs-docs-canvas }}
--- a/docs/templates/pages/getting-started.mustache
+++ b/docs/templates/pages/getting-started.mustache
@@ -7,12 +7,15 @@
  </div>
 </header>

-<div class="container">
+<div class="bs-docs-canvas">

+  <div class="container">

+    <!-- Docs nav
+    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#download-bootstrap">{{_i}}Download{{/i}} <i class="icon-chevron-right"></i></a></li>
          <li><a href="#file-structure">{{_i}}File structure{{/i}} <i class="icon-chevron-right"></i></a></li>
          <li><a href="#contents">{{_i}}What's included{{/i}} <i class="icon-chevron-right"></i></a></li>
@@ -211,4 +214,6 @@
      </div>{{! /span9 }}
    </div>{{! row}}

-</div>{{! /container }}
+  </div>{{! /.container }}
+
+</div>{{! /.bs-docs-canvas }}
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -11,7 +11,9 @@
  </div>
 </div>

-<div class="bs-docs-social">
+<div class="bs-docs-canvas">
+
+  <div class="bs-docs-social">
    <div class="container">
      <ul class="bs-docs-social-buttons">
        <li>
@@ -28,9 +30,9 @@
        </li>
      </ul>
    </div>
-</div>
+  </div>

-<div class="container">
+  <div class="container">

    <div class="marketing">

@@ -84,6 +86,8 @@
        </ul>
       </div>

-  </div><!-- /.marketing -->
+    </div>{{! /.marketing }}
+
+  </div>{{! /.container }}

-</div>{{! /container }}
+</div>{{! /.bs-docs-canvas }}
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -7,15 +7,15 @@
  </div>
 </header>

+<div class="bs-docs-canvas">

-<div class="container">
-
+  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
-      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#global">{{_i}}Global styles{{/i}} <i class="icon-chevron-right"></i></a></li>
          <li><a href="#gridSystem">{{_i}}Grid system{{/i}} <i class="icon-chevron-right"></i></a></li>
          <li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}} <i class="icon-chevron-right"></i></a></li>
@@ -472,4 +472,6 @@
      </div>{{! /span9 }}
    </div>{{! row}}

-</div>{{! /container }}
+  </div>{{! /.container }}
+
+</div>{{! /.bs-docs-canvas }}
--- a/js/bootstrap-affix.js
+++ b/js/bootstrap-affix.js
--- a/js/bootstrap-transition.js
+++ b/js/bootstrap-transition.js
@@ -36,8 +36,7 @@
          , transEndEventNames = {
               'WebkitTransition' : 'webkitTransitionEnd'
            ,  'MozTransition'    : 'transitionend'
-            ,  'OTransition'      : 'otransitionend'
-            ,  'msTransition'     : 'MSTransitionEnd'
+            ,  'OTransition'      : 'oTransitionEnd otransitionend'
            ,  'transition'       : 'transitionend'
            }
          , name

--- a/js/tests/unit/bootstrap-affix.js
+++ b/js/tests/unit/bootstrap-affix.js
@@ -16,10 +16,4 @@ $(function () {
        ok(!$affix.hasClass('affix'), 'affix class was not added')
      })

-      test("should add affix class if scrolled to correct position", function () {
-        var $affix = $('<div></div>').appendTo('body').affix()
-        $('body').trigger('scroll')
-        ok($affix.hasClass('affix'), 'element has class affix')
-      })
-
 })
\ No newline at end of file
--- a/less/navs.less
+++ b/less/navs.less
@@ -171,10 +171,10 @@
  .border-radius(0);
 }
 .nav-tabs.nav-stacked > li:first-child > a {
-  .border-radius(4px 4px 0 0);
+  .border-top-radius(4px);
 }
 .nav-tabs.nav-stacked > li:last-child > a {
-  .border-radius(0 0 4px 4px);
+  .border-bottom-radius(4px);
 }
 .nav-tabs.nav-stacked > li > a:hover {
  border-color: #ddd;