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

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>`
 

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;
+  -webkit-border-top-right-radius: 4px;
-     -moz-border-radius: 4px 4px 0 0;
+          border-top-right-radius: 4px;
-          border-radius: 4px 4px 0 0;
+  -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;
+  -webkit-border-bottom-right-radius: 4px;
-     -moz-border-radius: 0 0 4px 4px;
+          border-bottom-right-radius: 4px;
-          border-radius: 0 0 4px 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 {

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;
+  }
+}

docs/assets/js/bootstrap-transition.js

@@ -36,7 +36,7 @@
           , transEndEventNames = {
                'WebkitTransition' : 'webkitTransitionEnd'
             ,  'MozTransition'    : 'transitionend'
-            ,  'OTransition'      : 'otransitionend'
+            ,  'OTransition'      : 'oTransitionEnd otransitionend'
             ,  'msTransition'     : 'MSTransitionEnd'
             ,  'transition'       : 'transitionend'
             }

docs/assets/js/bootstrap.js

@@ -36,7 +36,7 @@
           , transEndEventNames = {
                'WebkitTransition' : 'webkitTransitionEnd'
             ,  'MozTransition'    : 'transitionend'
-            ,  'OTransition'      : 'otransitionend'
+            ,  'OTransition'      : 'oTransitionEnd otransitionend'
             ,  'msTransition'     : 'MSTransitionEnd'
             ,  'transition'       : 'transitionend'
             }

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">
+  <pre class="prettyprint linenums">
-&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
+  &lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
-</pre>
+  </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>
 
 

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">
+          <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
-&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">
+          <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
-&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>
 
 

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>
 
 

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>
 
 

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>
 

docs/javascript.html

@@ -78,8 +78,10 @@
   </div>
 </header>
 
-<div class="container">
 
+<div class="bs-docs-canvas">
+
+  <div class="container">
 
     <!-- Docs nav
     ================================================== -->
@@ -105,7 +107,6 @@
       <div class="span9">
 
 
-
         <!-- Overview
         ================================================== -->
         <section id="overview">
@@ -120,46 +121,30 @@
           <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
 
           <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
-
+          <pre class="prettyprint linenums">$('body').off('.data-api')</pre>
-<pre class="prettyprint linenums">
-  $('body').off('.data-api')
-</pre>
 
           <p>Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:</p>
-
+          <pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre>
-<pre class="prettyprint linenums">
-  $('body').off('.alert.data-api')
-</pre>
 
           <h3>Programmatic API</h3>
           <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
-
+          <pre class="prettyprint linenums">$(".btn.danger").button("toggle").addClass("fat")</pre>
-<pre class="prettyprint linenums">
-  $(".btn.danger").button("toggle").addClass("fat")
-</pre>
-
           <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
-
 <pre class="prettyprint linenums">
-  $("#myModal").modal()                       // initialized with defaults
+$("#myModal").modal()                       // initialized with defaults
-  $("#myModal").modal({ keyboard: false })   // initialized with no keyboard
+$("#myModal").modal({ keyboard: false })   // initialized with no keyboard
-  $("#myModal").modal('show')                // initializes and invokes show immediately</p>
+$("#myModal").modal('show')                // initializes and invokes show immediately</p>
 </pre>
-
           <p>Each plugin also exposes it's raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
 
-
           <h3>Events</h3>
           <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and it's past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
-
           <p>All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.</p>
-
 <pre class="prettyprint linenums">
-  $('#myModal').on('show', function (e) {
+$('#myModal').on('show', function (e) {
     if (!data) return e.preventDefault() // stops modal from being shown
-  })
+})
 </pre>
-
         </section>
 
 
@@ -294,9 +279,7 @@
 
             <h3>Via data attributes</h3>
             <p>Activate a modal without writing javascript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
-<pre class="prettyprint linenums">
+            <pre class="prettyprint linenums">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;</pre>
-&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;
-</pre>
 
             <h3>Via javascript</h3>
             <p>Call a modal with id <code>myModal</code> with a single line of javascript:</p>
@@ -337,7 +320,7 @@
                  <td>path</td>
                  <td>false</td>
                  <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
-<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
+                <pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
                </tr>
               </tbody>
             </table>
@@ -348,7 +331,8 @@
 <pre class="prettyprint linenums">
 $('#myModal').modal({
   keyboard: false
-})</pre>
+})
+</pre>
             <h4>.modal('toggle')</h4>
             <p>Manually toggles a modal.</p>
             <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
@@ -800,7 +784,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
           <h2>Usage</h2>
           <p>Trigger the tooltip via javascript:</p>
-<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
+          <pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
 
           <h3>Options</h3>
           <p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
@@ -869,9 +853,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
           <h3>Markup</h3>
           <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
-<pre class="prettyprint linenums">
+          <pre class="prettyprint linenums">&lt;a href="#" rel="tooltip" title="first tooltip"&gt;hover over me&lt;/a&gt;</pre>
-&lt;a href="#" rel="tooltip" title="first tooltip"&gt;hover over me&lt;/a&gt;
-</pre>
 
           <h3>Methods</h3>
           <h4>$().tooltip(options)</h4>
@@ -902,6 +884,20 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
         <h2>Examples</h2>
         <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
 
+        <h3>Static popover</h3>
+        <p>Four options are available: top, right, bottom, and left aligned.</p>
+        <div class="bs-docs-example bs-docs-example-popover">
+          <div class="popover top">
+            <div class="arrow"></div>
+            <h3 class="popover-title">Popover top</h3>
+            <div class="popover-content">
+              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+            </div>
+          </div>
+
+          <h2>Examples</h2>
+          <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
+
           <h3>Static popover</h3>
           <p>Four options are available: top, right, bottom, and left aligned.</p>
           <div class="bs-docs-example bs-docs-example-popover">
@@ -1047,6 +1043,129 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
 
 
+        <!-- Alert
+        ================================================== -->
+        <section id="alerts">
+          <div class="page-header">
+            <h1>Alert messages <small>bootstrap-alert.js</small></h1>
+          </div>
+
+
+          <h2>Example alerts</h2>
+          <p>Add dismiss functionality to all alerge messages with this plugin.</p>
+          <div class="bs-docs-example">
+            <div class="alert fade in">
+              <button type="button" class="close" data-dismiss="alert">&times;</button>
+              <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
+            </div>
+            <p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p>
+
+            <h3>Live demo</h3>
+            <div class="bs-docs-example" style="padding-bottom: 24px;">
+              <a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Hover for popover</a>
+            </div>
+
+
+            <hr class="bs-docs-separator">
+
+
+            <h2>Usage</h2>
+            <p>Enable popovers via javascript:</p>
+            <pre class="prettyprint linenums">$('#example').popover(options)</pre>
+
+            <h3>Options</h3>
+            <p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
+            <table class="table table-bordered table-striped">
+              <thead>
+               <tr>
+                 <th style="width: 100px;">Name</th>
+                 <th style="width: 100px;">type</th>
+                 <th style="width: 50px;">default</th>
+                 <th>description</th>
+               </tr>
+              </thead>
+              <tbody>
+               <tr>
+                 <td>animation</td>
+                 <td>boolean</td>
+                 <td>true</td>
+                 <td>apply a css fade transition to the tooltip</td>
+               </tr>
+               <tr>
+                 <td>html</td>
+                 <td>boolean</td>
+                 <td>true</td>
+                 <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
+               </tr>
+               <tr>
+                 <td>placement</td>
+                 <td>string|function</td>
+                 <td>'right'</td>
+                 <td>how to position the popover - top | bottom | left | right</td>
+               </tr>
+               <tr>
+                 <td>selector</td>
+                 <td>string</td>
+                 <td>false</td>
+                 <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
+               </tr>
+               <tr>
+                 <td>trigger</td>
+                 <td>string</td>
+                 <td>'hover'</td>
+                 <td>how popover is triggered - hover | focus | manual</td>
+               </tr>
+               <tr>
+                 <td>title</td>
+                 <td>string | function</td>
+                 <td>''</td>
+                 <td>default title value if `title` attribute isn't present</td>
+               </tr>
+               <tr>
+                 <td>content</td>
+                 <td>string | function</td>
+                 <td>''</td>
+                 <td>default content value if `data-content` attribute isn't present</td>
+               </tr>
+               <tr>
+                 <td>delay</td>
+                 <td>number | object</td>
+                 <td>0</td>
+                 <td>
+                  <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+                  <p>If a number is supplied, delay is applied to both hide/show</p>
+                  <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+                 </td>
+               </tr>
+              </tbody>
+            </table>
+            <div class="alert alert-info">
+              <strong>Heads up!</strong>
+              Options for individual popovers can alternatively be specified through the use of data attributes.
+            </div>
+
+            <h3>Markup</h3>
+            <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
+
+            <h3>Methods</h3>
+            <h4>$().popover(options)</h4>
+            <p>Initializes popovers for an element collection.</p>
+            <h4>.popover('show')</h4>
+            <p>Reveals an elements popover.</p>
+            <pre class="prettyprint linenums">$('#element').popover('show')</pre>
+            <h4>.popover('hide')</h4>
+            <p>Hides an elements popover.</p>
+            <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
+            <h4>.popover('toggle')</h4>
+            <p>Toggles an elements popover.</p>
+            <pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
+            <h4>.popover('destroy')</h4>
+            <p>Destroys an element's popover.</p>
+            <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
+          </section>
+
+
+
           <!-- Alert
           ================================================== -->
           <section id="alerts">
@@ -1141,18 +1260,14 @@ $('#my-alert').bind('closed', function () {
                 Loading state
               </button>
             </div>
-<pre class="prettyprint linenums">
+            <pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>
-&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;
-</pre>
 
             <h4>Single toggle</h4>
             <p>Add data-toggle="button" to activate toggling on a single button.</p>
             <div class="bs-docs-example" style="padding-bottom: 24px;">
               <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
             </div>
-<pre class="prettyprint linenums">
+            <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
-&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
-</pre>
 
             <h4>Checkbox</h4>
             <p>Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.</p>
@@ -1225,7 +1340,8 @@ $('#my-alert').bind('closed', function () {
 <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
 &lt;script&gt;
   $('.btn').button('complete')
-&lt;/script&gt;</pre>
+&lt;/script&gt;
+</pre>
           </section>
 
 
@@ -1340,7 +1456,8 @@ $('#my-alert').bind('closed', function () {
 <pre class="prettyprint linenums">
 $('#myCollapsible').collapse({
   toggle: false
-})</pre>
+})
+</pre>
             <h4>.collapse('toggle')</h4>
             <p>Toggles a collapsible element to shown or hidden.</p>
             <h4>.collapse('show')</h4>
@@ -1539,9 +1656,7 @@ $('.carousel').carousel({
             <div class="bs-docs-example" style="background-color: #f5f5f5;">
               <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
             </div>
-<pre class="prettyprint linenums">
+            <pre class="prettyprint linenums">&lt;input type="text" data-provide="typeahead"&gt;</pre>
-&lt;input type="text" data-provide="typeahead"&gt;
-</pre>
 
 
             <hr class="bs-docs-separator">
@@ -1672,10 +1787,15 @@ $('[data-spy="affix"]').each(function () {
              </tr>
             </tbody>
           </table>
+        </section>
+
+
 
       </div>
     </div>
 
+  </div>
+
 </div>
 
 

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>
 
 

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">
+  <pre class="prettyprint linenums">
-&lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
+  &lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
-</pre>
+  </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 }}

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">
+          <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
-&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">
+          <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
-&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 }}

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 }}

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 }}

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 }}

docs/templates/pages/javascript.mustache

@@ -7,8 +7,9 @@
   </div>
 </header>
 
-<div class="container">
+<div class="bs-docs-canvas">
 
+  <div class="container">
 
     <!-- Docs nav
     ================================================== -->
@@ -34,7 +35,6 @@
       <div class="span9">
 
 
-
         <!-- Overview
         ================================================== -->
         <section id="overview">
@@ -49,46 +49,30 @@
           <p>{{_i}}You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.{{/i}}</p>
 
           <p>{{_i}}That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:{{/i}}
-
+          <pre class="prettyprint linenums">$('body').off('.data-api')</pre>
-<pre class="prettyprint linenums">
-  $('body').off('.data-api')
-</pre>
 
           <p>{{_i}}Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:{{/i}}</p>
-
+          <pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre>
-<pre class="prettyprint linenums">
-  $('body').off('.alert.data-api')
-</pre>
 
           <h3>{{_i}}Programmatic API{{/i}}</h3>
           <p>{{_i}}We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.{{/i}}</p>
-
+          <pre class="prettyprint linenums">$(".btn.danger").button("toggle").addClass("fat")</pre>
-<pre class="prettyprint linenums">
-  $(".btn.danger").button("toggle").addClass("fat")
-</pre>
-
           <p>{{_i}}All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):{{/i}}</p>
-
 <pre class="prettyprint linenums">
-  $("#myModal").modal()                       // initialized with defaults
+$("#myModal").modal()                       // initialized with defaults
-  $("#myModal").modal({ keyboard: false })   // initialized with no keyboard
+$("#myModal").modal({ keyboard: false })   // initialized with no keyboard
-  $("#myModal").modal('show')                // initializes and invokes show immediately</p>
+$("#myModal").modal('show')                // initializes and invokes show immediately</p>
 </pre>
-
           <p>{{_i}}Each plugin also exposes it's raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p>
 
-
           <h3>{{_i}}Events{{/i}}</h3>
           <p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and it's past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p>
-
           <p>{{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}</p>
-
 <pre class="prettyprint linenums">
-  $('#myModal').on('show', function (e) {
+$('#myModal').on('show', function (e) {
     if (!data) return e.preventDefault() // stops modal from being shown
-  })
+})
 </pre>
-
         </section>
 
 
@@ -224,9 +208,7 @@
 
             <h3>{{_i}}Via data attributes{{/i}}</h3>
             <p>{{_i}}Activate a modal without writing javascript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.{{/i}}</p>
-<pre class="prettyprint linenums">
+            <pre class="prettyprint linenums">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;</pre>
-&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;
-</pre>
 
             <h3>{{_i}}Via javascript{{/i}}</h3>
             <p>{{_i}}Call a modal with id <code>myModal</code> with a single line of javascript:{{/i}}</p>
@@ -267,7 +249,7 @@
                  <td>{{_i}}path{{/i}}</td>
                  <td>{{_i}}false{{/i}}</td>
                  <td><p>{{_i}}If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:{{/i}}</p>
-<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
+                <pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
                </tr>
               </tbody>
             </table>
@@ -278,7 +260,8 @@
 <pre class="prettyprint linenums">
 $('#myModal').modal({
   keyboard: false
-})</pre>
+})
+</pre>
             <h4>.modal('toggle')</h4>
             <p>{{_i}}Manually toggles a modal.{{/i}}</p>
             <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
@@ -730,7 +713,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
           <h2>{{_i}}Usage{{/i}}</h2>
           <p>{{_i}}Trigger the tooltip via javascript:{{/i}}</p>
-<pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre>
+          <pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre>
 
           <h3>{{_i}}Options{{/i}}</h3>
           <p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
@@ -799,9 +782,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
           <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
-<pre class="prettyprint linenums">
+          <pre class="prettyprint linenums">&lt;a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}"&gt;{{_i}}hover over me{{/i}}&lt;/a&gt;</pre>
-&lt;a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}"&gt;{{_i}}hover over me{{/i}}&lt;/a&gt;
-</pre>
 
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().tooltip({{_i}}options{{/i}})</h4>
@@ -832,6 +813,20 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
         <h2>{{_i}}Examples{{/i}}</h2>
         <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong>{{/i}}</p>
 
+        <h3>{{_i}}Static popover{{/i}}</h3>
+        <p>{{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}</p>
+        <div class="bs-docs-example bs-docs-example-popover">
+          <div class="popover top">
+            <div class="arrow"></div>
+            <h3 class="popover-title">Popover top</h3>
+            <div class="popover-content">
+              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+            </div>
+          </div>
+
+          <h2>{{_i}}Examples{{/i}}</h2>
+          <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong>{{/i}}</p>
+
           <h3>{{_i}}Static popover{{/i}}</h3>
           <p>{{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}</p>
           <div class="bs-docs-example bs-docs-example-popover">
@@ -977,6 +972,129 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
 
 
+        <!-- Alert
+        ================================================== -->
+        <section id="alerts">
+          <div class="page-header">
+            <h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
+          </div>
+
+
+          <h2>{{_i}}Example alerts{{/i}}</h2>
+          <p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p>
+          <div class="bs-docs-example">
+            <div class="alert fade in">
+              <button type="button" class="close" data-dismiss="alert">&times;</button>
+              <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
+            </div>
+            <p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p>
+
+            <h3>Live demo</h3>
+            <div class="bs-docs-example" style="padding-bottom: 24px;">
+              <a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Hover for popover{{/i}}</a>
+            </div>
+
+
+            <hr class="bs-docs-separator">
+
+
+            <h2>{{_i}}Usage{{/i}}</h2>
+            <p>{{_i}}Enable popovers via javascript:{{/i}}</p>
+            <pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
+
+            <h3>{{_i}}Options{{/i}}</h3>
+            <p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
+            <table class="table table-bordered table-striped">
+              <thead>
+               <tr>
+                 <th style="width: 100px;">{{_i}}Name{{/i}}</th>
+                 <th style="width: 100px;">{{_i}}type{{/i}}</th>
+                 <th style="width: 50px;">{{_i}}default{{/i}}</th>
+                 <th>{{_i}}description{{/i}}</th>
+               </tr>
+              </thead>
+              <tbody>
+               <tr>
+                 <td>{{_i}}animation{{/i}}</td>
+                 <td>{{_i}}boolean{{/i}}</td>
+                 <td>true</td>
+                 <td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
+               </tr>
+               <tr>
+                 <td>{{_i}}html{{/i}}</td>
+                 <td>{{_i}}boolean{{/i}}</td>
+                 <td>true</td>
+                 <td>{{_i}}Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}</td>
+               </tr>
+               <tr>
+                 <td>{{_i}}placement{{/i}}</td>
+                 <td>{{_i}}string|function{{/i}}</td>
+                 <td>'right'</td>
+                 <td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
+               </tr>
+               <tr>
+                 <td>{{_i}}selector{{/i}}</td>
+                 <td>{{_i}}string{{/i}}</td>
+                 <td>false</td>
+                 <td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
+               </tr>
+               <tr>
+                 <td>{{_i}}trigger{{/i}}</td>
+                 <td>{{_i}}string{{/i}}</td>
+                 <td>'hover'</td>
+                 <td>{{_i}}how popover is triggered{{/i}} - hover | focus | manual</td>
+               </tr>
+               <tr>
+                 <td>{{_i}}title{{/i}}</td>
+                 <td>{{_i}}string | function{{/i}}</td>
+                 <td>''</td>
+                 <td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
+               </tr>
+               <tr>
+                 <td>{{_i}}content{{/i}}</td>
+                 <td>{{_i}}string | function{{/i}}</td>
+                 <td>''</td>
+                 <td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
+               </tr>
+               <tr>
+                 <td>{{_i}}delay{{/i}}</td>
+                 <td>{{_i}}number | object{{/i}}</td>
+                 <td>0</td>
+                 <td>
+                  <p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
+                  <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
+                  <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
+                 </td>
+               </tr>
+              </tbody>
+            </table>
+            <div class="alert alert-info">
+              <strong>{{_i}}Heads up!{{/i}}</strong>
+              {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
+            </div>
+
+            <h3>{{_i}}Markup{{/i}}</h3>
+            <p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
+
+            <h3>{{_i}}Methods{{/i}}</h3>
+            <h4>$().popover({{_i}}options{{/i}})</h4>
+            <p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
+            <h4>.popover('show')</h4>
+            <p>{{_i}}Reveals an elements popover.{{/i}}</p>
+            <pre class="prettyprint linenums">$('#element').popover('show')</pre>
+            <h4>.popover('hide')</h4>
+            <p>{{_i}}Hides an elements popover.{{/i}}</p>
+            <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
+            <h4>.popover('toggle')</h4>
+            <p>{{_i}}Toggles an elements popover.{{/i}}</p>
+            <pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
+            <h4>.popover('destroy')</h4>
+            <p>{{_i}}Destroys an element's popover.{{/i}}</p>
+            <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
+          </section>
+
+
+
           <!-- Alert
           ================================================== -->
           <section id="alerts">
@@ -1071,18 +1189,14 @@ $('#my-alert').bind('closed', function () {
                 {{_i}}Loading state{{/i}}
               </button>
             </div>{{! /example }}
-<pre class="prettyprint linenums">
+            <pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>
-&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;
-</pre>
 
             <h4>{{_i}}Single toggle{{/i}}</h4>
             <p>{{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}</p>
             <div class="bs-docs-example" style="padding-bottom: 24px;">
               <button type="button" class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
             </div>{{! /example }}
-<pre class="prettyprint linenums">
+            <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
-&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
-</pre>
 
             <h4>{{_i}}Checkbox{{/i}}</h4>
             <p>{{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}</p>
@@ -1155,7 +1269,8 @@ $('#my-alert').bind('closed', function () {
 <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
 &lt;script&gt;
   $('.btn').button('complete')
-&lt;/script&gt;</pre>
+&lt;/script&gt;
+</pre>
           </section>
 
 
@@ -1270,7 +1385,8 @@ $('#my-alert').bind('closed', function () {
 <pre class="prettyprint linenums">
 $('#myCollapsible').collapse({
   toggle: false
-})</pre>
+})
+</pre>
             <h4>.collapse('toggle')</h4>
             <p>{{_i}}Toggles a collapsible element to shown or hidden.{{/i}}</p>
             <h4>.collapse('show')</h4>
@@ -1469,9 +1585,7 @@ $('.carousel').carousel({
             <div class="bs-docs-example" style="background-color: #f5f5f5;">
               <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
             </div>{{! /example }}
-<pre class="prettyprint linenums">
+            <pre class="prettyprint linenums">&lt;input type="text" data-provide="typeahead"&gt;</pre>
-&lt;input type="text" data-provide="typeahead"&gt;
-</pre>
 
 
             <hr class="bs-docs-separator">
@@ -1602,8 +1716,13 @@ $('[data-spy="affix"]').each(function () {
              </tr>
             </tbody>
           </table>
+        </section>
+
+
 
       </div>{{! /span9 }}
     </div>{{! row}}
 
-</div>{{! /container }}
+  </div>{{! /.container }}
+
+</div>{{! /.bs-docs-canvas }}

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 }}

js/bootstrap-transition.js

@@ -36,8 +36,7 @@
           , transEndEventNames = {
                'WebkitTransition' : 'webkitTransitionEnd'
             ,  'MozTransition'    : 'transitionend'
-            ,  'OTransition'      : 'otransitionend'
+            ,  'OTransition'      : 'oTransitionEnd otransitionend'
-            ,  'msTransition'     : 'MSTransitionEnd'
             ,  'transition'       : 'transitionend'
             }
           , name

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')
-      })
-
 })

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;