Merge branch '2.0.3-wip'

Conflicts:
	Makefile
	docs/assets/js/bootstrap.js
	docs/assets/js/bootstrap.min.js

1 files changed, 69 insertions, 20 deletions

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 7fd4c98d0..1ae3ffa5a 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -129,9 +129,9 @@
           <h2>{{_i}}Static example{{/i}}</h2>
           <p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
           <div class="well modal-example" style="background-color: #888; border: none;">
-            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
+            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
               <div class="modal-header">
-                <a href="#" class="close" data-dismiss="modal">&times;</a>
+                <button class="close" data-dismiss="modal">&times;</button>
                 <h3>{{_i}}Modal header{{/i}}</h3>
               </div>
               <div class="modal-body">
@@ -149,7 +149,7 @@
           <!-- sample modal content -->
           <div id="myModal" class="modal hide fade">
             <div class="modal-header">
-              <a class="close" data-dismiss="modal" >&times;</a>
+              <button class="close" data-dismiss="modal">&times;</button>
               <h3>{{_i}}Modal Heading{{/i}}</h3>
             </div>
             <div class="modal-body">
@@ -226,7 +226,7 @@
 <pre class="prettyprint linenums">
 &lt;div class="modal" id="myModal"&gt;
   &lt;div class="modal-header"&gt;
-    &lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
+    &lt;button class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
     &lt;h3&gt;Modal header&lt;/h3&gt;
   &lt;/div&gt;
   &lt;div class="modal-body"&gt;
@@ -416,6 +416,20 @@ $('#myModal').on('hidden', function () {
   &lt;/li&gt;
   ...
 &lt;/ul&gt;</pre>
+          <p>{{_i}}To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-pills"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
+      {{_i}}Dropdown{{/i}}
+      &lt;b class="caret"&gt;&lt;/b&gt;
+    &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      ...
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().dropdown()</h4>
           <p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
@@ -494,6 +508,14 @@ $('#myModal').on('hidden', function () {
             <strong>{{_i}}Heads up!{{/i}}</strong>
             {{_i}}Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.{{/i}}
           </div>
+          <h3>{{_i}}Methods{{/i}}</h3>
+          <h4>.scrollspy('refresh')</h4>
+          <p>{{_i}}When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}</p>
+<pre class="prettyprint linenums">
+$('[data-spy="scroll"]').each(function () {
+  var $spy = $(this).scrollspy('refresh')
+});
+</pre>
           <h3>{{_i}}Options{{/i}}</h3>
           <table class="table table-bordered table-striped">
             <thead>
@@ -513,6 +535,21 @@ $('#myModal').on('hidden', function () {
              </tr>
             </tbody>
           </table>
+           <h3>{{_i}}Events{{/i}}</h3>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 150px;">{{_i}}Event{{/i}}</th>
+               <th>{{_i}}Description{{/i}}</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>{{_i}}activate{{/i}}</td>
+               <td>{{_i}}This event fires whenever a new item becomes activated by the scrollspy.{{/i}}</td>
+            </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </section>
@@ -533,7 +570,7 @@ $('#myModal').on('hidden', function () {
         <div class="span9 columns">
           <h2>{{_i}}Example tabs{{/i}}</h2>
           <p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
-          <ul id="tab" class="nav nav-tabs">
+          <ul id="myTab" class="nav nav-tabs">
             <li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
             <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
             <li class="dropdown">
@@ -560,10 +597,21 @@ $('#myModal').on('hidden', function () {
           </div>
           <hr>
           <h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2>
-          <p>{{_i}}Enable tabbable tabs via javascript:{{/i}}</p>
-          <pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
+          <p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p>
+          <pre class="prettyprint linenums">
+$('#myTab a').click(function (e) {
+  e.preventDefault();
+  $(this).tab('show');
+})</pre>
+          <p>{{_i}}You can activate individual tabs in several ways:{{/i}}</p>
+<pre class="prettyprint linenums">
+$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
+$('#myTab a:first').tab('show'); // Select first tab
+$('#myTab a:last').tab('show'); // Select last tab
+$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
+</pre>
           <h3>{{_i}}Markup{{/i}}</h3>
-          <p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.{{/i}}</p>
+          <p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the bootstrap tab styling.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
   &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
@@ -574,10 +622,10 @@ $('#myModal').on('hidden', function () {
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().tab</h4>
           <p>
-            {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
+            {{_i}}Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.{{/i}}
           </p>
 <pre class="prettyprint linenums">
-&lt;ul class="nav nav-tabs"&gt;
+&lt;ul class="nav nav-tabs" id="myTab"&gt;
   &lt;li class="active"&gt;&lt;a href="#home"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#profile"&gt;{{_i}}Profile{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#messages"&gt;{{_i}}Messages{{/i}}&lt;/a&gt;&lt;/li&gt;
@@ -593,7 +641,7 @@ $('#myModal').on('hidden', function () {
 
 &lt;script&gt;
   $(function () {
-    $('.tabs a:last').tab('show')
+    $('#myTab a:last').tab('show');
   })
 &lt;/script&gt;</pre>
           <h3>{{_i}}Events{{/i}}</h3>
@@ -642,7 +690,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h2>{{_i}}Example use of Tooltips{{/i}}</h2>
           <p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
           <div class="tooltip-demo well">
-            <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
+            <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
             </p>
           </div>
           <hr>
@@ -695,7 +743,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>{{_i}}number | object{{/i}}</td>
                <td>0</td>
                <td>
-                <p>{{_i}}delay showing and hiding the tooltip (ms){{/i}}</p>
+                <p>{{_i}}delay showing and hiding the tooltip (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>
@@ -804,7 +852,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>{{_i}}number | object{{/i}}</td>
                <td>0</td>
                <td>
-                <p>{{_i}}delay showing and hiding the popover (ms){{/i}}</p>
+                <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>
@@ -817,7 +865,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           </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 the selector option.{{/i}}
+          {{_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>
@@ -853,11 +901,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h2>{{_i}}Example alerts{{/i}}</h2>
           <p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
           <div class="alert fade in">
-            <a class="close" data-dismiss="alert" href="#">&times;</a>
+            <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>
           <div class="alert alert-block alert-error fade in">
-            <a class="close" data-dismiss="alert" href="#">&times;</a>
+            <button class="close" data-dismiss="alert">&times;</button>
             <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
             <p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
             <p>
@@ -963,7 +1011,7 @@ $('#my-alert').bind('closed', function () {
           <hr>
           <h2>{{_i}}Using bootstrap-button.js{{/i}}</h2>
           <p>{{_i}}Enable buttons via javascript:{{/i}}</p>
-          <pre class="prettyprint linenums">$('.tabs').button()</pre>
+          <pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
             <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}</p>
 <pre class="prettyprint linenums">
@@ -1025,7 +1073,8 @@ $('#my-alert').bind('closed', function () {
           <h3>{{_i}}About{{/i}}</h3>
           <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
           <a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
-        </div>
+          <p class="muted"><strong>*</strong> {{_i}}Requires the Transitions plugin to be included.{{/i}}</p>
+       </div>
         <div class="span9 columns">
           <h2>{{_i}}Example accordion{{/i}}</h2>
           <p>{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}</p>
@@ -1232,7 +1281,7 @@ $('#myCollapsible').on('hidden', function () {
                <td>{{_i}}interval{{/i}}</td>
                <td>{{_i}}number{{/i}}</td>
                <td>5000</td>
-               <td>{{_i}}The amount of time to delay between automatically cycling an item.{{/i}}</td>
+               <td>{{_i}}The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.{{/i}}</td>
              </tr>
              <tr>
                <td>{{_i}}pause{{/i}}</td>