Merge branch 'master' of github.com:twbs/bootstrap

Conflicts:
	dist/css/bootstrap.min.css

assets/js/application.js

@@ -6,6 +6,21 @@
 
   $(function(){
 
+    // IE10 viewport hack for Surface/desktop Windows 8 bug
+    //
+    // See Getting Started docs for more information
+    if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+      var msViewportStyle = document.createElement("style");
+      msViewportStyle.appendChild(
+        document.createTextNode(
+          "@-ms-viewport{width:auto!important}"
+        )
+      );
+      document.getElementsByTagName("head")[0].
+        appendChild(msViewportStyle);
+    }
+
+
     var $window = $(window)
     var $body   = $(document.body)
 

dist/css/bootstrap.css

@@ -6346,12 +6346,6 @@ body.modal-open,
   width: device-width;
 }
 
-@media screen and (max-width: 400px) {
-  @-ms-viewport {
-    width: 320px;
-  }
-}
-
 .hidden {
   display: none !important;
   visibility: hidden !important;

getting-started.html

@@ -727,8 +727,12 @@ bootstrap/
 {% endhighlight %}
     <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
 
-    <h3>Windows Phone 8 and Internet Explorer 10</h3>
-    <p>Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.</p>
+    <h3>Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
+    <p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
+{% highlight css %}
+@-ms-viewport       { width: device-width; }
+{% endhighlight %}
+    <p>However, this doesn't work as it causes Windows Phone 8 devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug until Microsoft issues a fix</strong>.</p>
 {% highlight css %}
 @-webkit-viewport   { width: device-width; }
 @-moz-viewport      { width: device-width; }
@@ -749,6 +753,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
 }
 {% endhighlight %}
     <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
+    <p>As a heads up, we include this in the Bootstrap docs as an example.</p>
 
     <h3>Safari percent rounding</h3>
     <p>In the latest Safari for Mac, its rendering engine has a little trouble with the long decimal places of our <code>.col-*-1</code> grid classes, meaning if you have 12 individual columns you'll notice they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>

javascript.html

@@ -461,6 +461,8 @@ $('#myModal').on('hidden.bs.modal', function () {
   <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
     Dropdown <span class="caret"></span>
   </a>
+
+
   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
     ...
   </ul>
@@ -824,6 +826,10 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
       </div>
     </div><!-- /example -->
 
+    <div class="bs-callout bs-callout-danger">
+      <h4>Opt-in functionality</h4>
+      <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
+    </div>
     <div class="bs-callout bs-callout-info">
       <h4>Tooltips in button groups and input groups require special setting</h4>
       <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
@@ -990,6 +996,10 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
       <h4>Plugin dependency</h4>
       <p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
     </div>
+    <div class="bs-callout bs-callout-danger">
+      <h4>Opt-in functionality</h4>
+      <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
+    </div>
     <div class="bs-callout bs-callout-info">
       <h4>Popovers in button groups and input groups require special setting</h4>
       <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
@@ -1021,6 +1031,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
       <div class="popover bottom">
         <div class="arrow"></div>
         <h3 class="popover-title">Popover bottom</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>
@@ -1146,9 +1157,6 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
       <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
     </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>

less/responsive-utilities.less

@@ -3,36 +3,35 @@
 // --------------------------------------------------
 
 
-// IE10 Metro responsive
-// Required for Windows 8 Metro split-screen snapping with IE10
+// IE10 in Windows (Phone) 8
 //
+// Support for responsive views via media queries is kind of borked in IE10, for
+// Surface/desktop in split view and for Windows Phone 8. This particular fix
+// must be accompanied by a snippet of JavaScript to sniff the user agent and
+// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
+// our Getting Started page for more information on this bug.
+//
+// For more information, see the following:
+//
+// Issue: https://github.com/twbs/bootstrap/issues/10497
+// Docs: http://getbootstrap.com/getting-started/#browsers
 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
-@-ms-viewport{
+
+@-ms-viewport {
   width: device-width;
 }
 
-// IE10 on Windows Phone 8
-// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
-// other words, say on a Lumia, you'll get 768px as the device width,
-// meaning users will see the tablet styles and not phone styles.
-//
-// Alternatively you can override this with JS (see source below), but
-// we won't be doing that here given our limited scope.
-//
-// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
-@media screen and (max-width: 400px) {
-  @-ms-viewport{
-    width: 320px;
-  }
-}
 
 // Hide from screenreaders and browsers
+//
 // Credit: HTML5 Boilerplate
+
 .hidden {
   display: none !important;
   visibility: hidden !important;
 }
 
+
 // Visibility utilities
 
 .visible-xs {