Merge branch 'master' into docs-theme-toggler

Conflicts:
	docs/assets/css/docs.min.css

docs/_includes/header.html

@@ -29,21 +29,19 @@
 
 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
-  <script src="https://oss.maxcdn.com/html5shiv/3.7.1/html5shiv.min.js"></script>
+  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 
 <!-- Favicons -->
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
-                               <link rel="icon" href="../assets/ico/favicon.ico">
+<link rel="icon" href="../assets/ico/favicon.ico">
 
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
   ga('create', 'UA-146052-10', 'getbootstrap.com');
   ga('send', 'pageview');
-
 </script>

docs/_includes/js/affix.html

@@ -62,6 +62,13 @@
          <td>10</td>
          <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
        </tr>
+       <tr>
+         <td>target</td>
+         <td>selector | node | jQuery element</td>
+         <td>the <code>window</code> object</td>
+         <td>Specifies the target element of the affix.</td>
+       </tr>
+
       </tbody>
     </table>
   </div><!-- /.table-responsive -->

docs/_includes/js/carousel.html

@@ -21,10 +21,10 @@
           <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
         </div>
       </div>
-      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
       </a>
-      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
+      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
       </a>
     </div>
@@ -56,10 +56,10 @@
   </div>
 
   <!-- Controls -->
-  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
   </a>
-  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
+  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
   </a>
 </div>
@@ -102,10 +102,10 @@
           </div>
         </div>
       </div>
-      <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
+      <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
       </a>
-      <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
+      <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
       </a>
     </div>

docs/_includes/js/popovers.html

@@ -151,6 +151,33 @@ $('.popover-dismiss').popover({
           <td>true</td>
           <td>Apply a CSS fade transition to the popover</td>
         </tr>
+        <tr>
+          <td>container</td>
+          <td>string | false</td>
+          <td>false</td>
+          <td>
+           <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>content</td>
+          <td>string | function</td>
+          <td>''</td>
+          <td>
+            <p>Default content value if <code>data-content</code> attribute isn't present.</p>
+            <p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p>
+          </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>
         <tr>
           <td>html</td>
           <td>boolean</td>
@@ -169,22 +196,10 @@ $('.popover-dismiss').popover({
           <td>false</td>
           <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
         </tr>
-        <tr>
-          <td>trigger</td>
-          <td>string</td>
-          <td>'click'</td>
-          <td>How popover is triggered - click | hover | focus | manual</td>
-        </tr>
-        <tr>
-          <td>title</td>
-          <td>string | function</td>
-          <td>''</td>
-          <td>Default title value if <code>title</code> attribute isn't present</td>
-        </tr>
         <tr>
           <td>template</td>
           <td>string</td>
-          <td><code>'&lt;div class="popover"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+          <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
           <td>
            <p>Base HTML to use when creating the popover.</p>
            <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
@@ -194,32 +209,25 @@ $('.popover-dismiss').popover({
           </td>
         </tr>
         <tr>
-          <td>content</td>
+          <td>title</td>
           <td>string | function</td>
           <td>''</td>
-          <td>
-            <p>Default content value if <code>data-content</code> attribute isn't present.</p>
-            <p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p>
-          </td>
+          <td>Default title value if <code>title</code> 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>
+          <td>trigger</td>
+          <td>string</td>
+          <td>'click'</td>
+          <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
         </tr>
         <tr>
-          <td>container</td>
-          <td>string | false</td>
-          <td>false</td>
-          <td>
-           <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
-          </td>
-        </tr>
+         <td>viewport</td>
+         <td>string | object</td>
+         <td>{ selector: 'body', padding: 0 }</td>
+         <td>
+          <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ selector: '#viewport', padding: 0 }</code></p>
+         </td>
+       </tr>
       </tbody>
     </table>
   </div><!-- /.table-responsive -->

docs/_includes/js/scrollspy.html

@@ -65,7 +65,7 @@ body {
 <body data-spy="scroll" data-target=".navbar-example">
   ...
   <div class="navbar-example">
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs" role="tablist">
       ...
     </ul>
   </div>

docs/_includes/js/tabs.html

@@ -4,14 +4,14 @@
   <h2 id="tabs-examples">Example tabs</h2>
   <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
   <div class="bs-example bs-example-tabs">
-    <ul id="myTab" class="nav nav-tabs">
-      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-      <li><a href="#profile" data-toggle="tab">Profile</a></li>
+    <ul id="myTab" class="nav nav-tabs" role="tablist">
+      <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+      <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
       <li class="dropdown">
         <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
         <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
-          <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
-          <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
+          <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
+          <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
         </ul>
       </li>
     </ul>
@@ -60,11 +60,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
   <p>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 <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
 {% highlight html %}
 <!-- Nav tabs -->
-<ul class="nav nav-tabs">
-  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
+<ul class="nav nav-tabs" role="tablist">
+  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
+  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
+  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
 </ul>
 
 <!-- Tab panes -->
@@ -93,11 +93,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
     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.
   </p>
 {% highlight html %}
-<ul class="nav nav-tabs" id="myTab">
-  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
+<ul class="nav nav-tabs" role="tablist" id="myTab">
+  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
+  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
+  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
 </ul>
 
 <div class="tab-content">

docs/_includes/js/tooltips.html

@@ -90,6 +90,24 @@ $('#example').tooltip(options)
          <td>true</td>
          <td>Apply a CSS fade transition to the tooltip</td>
        </tr>
+       <tr>
+         <td>container</td>
+         <td>string | false</td>
+         <td>false</td>
+         <td>
+          <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
+         </td>
+       </tr>
+       <tr>
+         <td>delay</td>
+         <td>number | object</td>
+         <td>0</td>
+         <td>
+          <p>Delay showing and hiding the tooltip (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>
        <tr>
          <td>html</td>
          <td>boolean</td>
@@ -106,7 +124,7 @@ $('#example').tooltip(options)
          <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>
+         <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
        </tr>
        <tr>
          <td>template</td>
@@ -131,24 +149,6 @@ $('#example').tooltip(options)
          <td>'hover focus'</td>
          <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
        </tr>
-       <tr>
-         <td>delay</td>
-         <td>number | object</td>
-         <td>0</td>
-         <td>
-          <p>Delay showing and hiding the tooltip (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>
-       <tr>
-         <td>container</td>
-         <td>string | false</td>
-         <td>false</td>
-         <td>
-          <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
-         </td>
-       </tr>
        <tr>
          <td>viewport</td>
          <td>string | object</td>

docs/_includes/nav/css.html

@@ -133,10 +133,3 @@
     <li><a href="#sass-installation">Rails install</a></li>
   </ul>
 </li>
-<li>
-  <a href="#rtl">RTL version</a>
-  <ul class="nav">
-    <li><a href="#rtl-how-to">How to use</a></li>
-    <li><a href="#rtl-css-flip">CSS Flip</a></li>
-  </ul>
-</li>

docs/_includes/nav/getting-started.html

@@ -8,6 +8,14 @@
     <li><a href="#whats-included-source">Source code</a></li>
   </ul>
 </li>
+<li>
+  <a href="#grunt">Compiling CSS and JavaScript</a>
+  <ul class="nav">
+    <li><a href="#grunt-installing">Installing Grunt</a></li>
+    <li><a href="#grunt-commands">Available Grunt commands</a></li>
+    <li><a href="#grunt-troubleshooting">Troubleshooting</a></li>
+  </ul>
+</li>
 <li>
   <a href="#template">Basic template</a>
 </li>
@@ -20,13 +28,6 @@
     <li><a href="#examples-experiments">Experiments</a></li>
   </ul>
 </li>
-<li>
-  <a href="#rtl">RTL version</a>
-  <ul class="nav">
-    <li><a href="#rtl-how-to">How to use</a></li>
-    <li><a href="#rtl-css-flip">CSS Flip</a></li>
-  </ul>
-</li>
 <li>
   <a href="#community">Community</a>
 </li>

docs/assets/css/_src/docs.css

@@ -1111,6 +1111,8 @@ h1[id] {
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
+  word-break: normal;
+  word-wrap: nowrap;
   white-space: nowrap;
   background-color: transparent;
   border: 0;

docs/customize.html

@@ -58,6 +58,12 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
             Buttons
           </label>
         </div>
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" checked value="responsive-utilities.less">
+            Responsive utilities
+          </label>
+        </div>
       </div><!-- .col-xs-6 .col-sm-4 -->
 
       <div class="col-xs-6 col-sm-4">
@@ -88,7 +94,7 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
         </div>
         <div class="checkbox">
           <label>
-            <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,utilities.less,navs.less">
+            <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,navs.less">
             Navbar
           </label>
         </div>
@@ -222,20 +228,6 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
             Carousel
           </label>
         </div>
-
-        <h3>Utilities</h3>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="utilities.less" data-dependents="navbar.less">
-            Basic utilities
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="responsive-utilities.less">
-            Responsive utilities
-          </label>
-        </div>
       </div><!-- .col-xs-6 .col-sm-4 -->
     </div><!-- /.row -->
   </div>

docs/examples/blog/index.html

@@ -25,7 +25,7 @@
 
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.1/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
   </head>
@@ -168,7 +168,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
     <script src="../../assets/js/docs.min.js"></script>
   </body>