Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

Gruntfile.js

@@ -163,7 +163,7 @@ module.exports = function (grunt) {
           'Explorer >= 9',
           'iOS >= 7',
           'Opera >= 12',
-          'Safari >= 6'
+          'Safari >= 7.1'
         ]
       },
       core: {

dist/css/bootstrap.css

@@ -5192,10 +5192,6 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   border: 0;
 }
 
-.affix {
-  position: fixed;
-}
-
 .text-left {
   text-align: left;
 }

docs/_data/nav.yml

@@ -122,7 +122,6 @@
     - title: Buttons
     - title: Collapse
     - title: Carousel
-    - title: Affix
 
 - title: Examples
   pages:

docs/assets/css/src/docs.css

@@ -528,14 +528,10 @@ body {
 /*
  * Side navigation
  *
- * Scrollspy and affixed enhanced navigation to highlight sections and secondary
+ * Scrollspy and enhanced navigation to highlight sections and secondary
  * sections of docs content.
  */
 
-/* By default it's not affixed in mobile views, so undo that */
-.bs-docs-sidebar.affix {
-  position: static;
-}
 @media (min-width: 768px) {
   .bs-docs-sidebar {
     padding-left: 20px;
@@ -618,35 +614,11 @@ body {
   }
 }
 
-/* Show and affix the side nav when space allows it */
+/* Show the side nav when space allows it */
 @media (min-width: 992px) {
   .bs-docs-sidebar .nav > .active > ul {
     display: block;
   }
-  /* Widen the fixed sidebar */
-  .bs-docs-sidebar.affix,
-  .bs-docs-sidebar.affix-bottom {
-    width: 213px;
-  }
-  .bs-docs-sidebar.affix {
-    position: fixed; /* Undo the static from mobile first approach */
-    top: 20px;
-  }
-  .bs-docs-sidebar.affix-bottom {
-    position: absolute; /* Undo the static from mobile first approach */
-  }
-  .bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
-  .bs-docs-sidebar.affix .bs-docs-sidenav {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-@media (min-width: 1200px) {
-  /* Widen the fixed sidebar again */
-  .bs-docs-sidebar.affix-bottom,
-  .bs-docs-sidebar.affix {
-    width: 263px;
-  }
 }
 
 

docs/components/images.md

+---
+layout: page
+title: Images
+---
+
+## Responsive images
+
+Images in Bootstrap 3 can be made responsive-friendly via the addition of the `.img-responsive` class. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element.
+
+<div class="bs-example">
+  <img data-src="holder.js/1000x200" class="img-responsive" alt="Generic responsive image">
+</div>
+
+{% highlight html %}
+<img src="..." class="img-responsive" alt="Responsive image">
+{% endhighlight %}
+
+<div class="bs-callout bs-callout-warning">
+  <h4>SVG images and IE 9-10</h4>
+  <p>In Internet Explorer 9-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
+</div>
+
+## Image shapes
+
+Add classes to an `<img>` element to easily style images in any project.
+
+<div class="bs-example bs-example-images">
+  <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
+  <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
+</div>
+
+{% highlight html %}
+<img src="..." alt="..." class="img-rounded">
+<img src="..." alt="..." class="img-circle">
+<img src="..." alt="..." class="img-thumbnail">
+{% endhighlight %}

docs/dist/css/bootstrap.css

@@ -5192,10 +5192,6 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   border: 0;
 }
 
-.affix {
-  position: fixed;
-}
-
 .text-left {
   text-align: left;
 }

docs/getting-started/support.md

@@ -162,13 +162,6 @@ For more information and usage guidelines, read [Windows Phone 8 and Device-Widt
 
 As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.
 
-### Safari percent rounding
-
-The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our `.col-*-1` grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:
-
-- Add `.pull-right` to your last grid column to get the hard-right alignment
-- Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)
-
 ### Modals, navbars, and virtual keyboards
 
 #### Overflow and scrolling

docs/getting-started/third-party-support.md

@@ -7,50 +7,19 @@ While we don't officially support any third party plugins or add-ons, we do offe
 
 ### Box-sizing
 
-Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/).
+Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/).
 
-Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).
+You can deal with this conflict by overriding the box model back to `content-box` just for the third-party widget's section of the page:
 
 {% highlight scss %}
-/* Box-sizing resets
+/* Box-sizing reset
  *
- * Reset individual elements or override regions to avoid conflicts due to
- * global box model settings of Bootstrap. Two options, individual overrides and
- * region resets, are available as plain CSS and uncompiled Sass formats.
+ * Override an entire region's box model via CSS
+ * to avoid conflicts due to the global box model settings of Bootstrap.
  */
-
-/* Option 1A: Override a single element's box model via CSS */
-.element {
+.selector-for-some-widget {
   -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
           box-sizing: content-box;
 }
-
-/* Option 1B: Override a single element's box model by using a Bootstrap Sass mixin */
-.element {
-  .box-sizing(content-box);
-}
-
-/* Option 2A: Reset an entire region via CSS */
-.reset-box-sizing,
-.reset-box-sizing *,
-.reset-box-sizing *:before,
-.reset-box-sizing *:after {
-  -webkit-box-sizing: content-box;
-     -moz-box-sizing: content-box;
-          box-sizing: content-box;
-}
-
-/* Option 2B: Reset an entire region with a custom Sass mixin */
-.reset-box-sizing {
-  &,
-  *,
-  *:before,
-  *:after {
-    .box-sizing(content-box);
-  }
-}
-.element {
-  .reset-box-sizing();
-}
 {% endhighlight %}

docs/javascript/affix.md

----
-layout: page
-title: Affix
----
-
-## Example
-
-The subnavigation on the right is a live demo of the affix plugin.
-
-## Usage
-
-Use the affix plugin via data attributes or manually with your own JavaScript. **In both situations, you must provide CSS for the positioning and width of your affixed content.**
-
-### Position via CSS
-
-The affix plugin toggles between three classes, each representing a particular state: `.affix`, `.affix-top`, and `.affix-bottom`. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.
-
-Here's how the affix plugin works:
-
-- Scrolling past the element you want affixed should trigger the actual affixing. This is where `.affix` replaces `.affix-top` and sets `position: fixed;` (provided by Bootstrap's CSS).
-- If a bottom offset is defined, scrolling past it should replace `.affix` with `.affix-bottom`. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add `position: absolute;` when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.
-
-Follow the above steps to set your CSS for either of the usage options below.
-
-### Via data attributes
-
-To easily add affix behavior to any element, just add `data-spy="affix"` to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.
-
-{% highlight html %}
-<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
-  ...
-</div>
-{% endhighlight %}
-
-### Via JavaScript
-
-Call the affix plugin via JavaScript:
-
-{% highlight js %}
-$('#myAffix').affix({
-  offset: {
-    top: 100,
-    bottom: function () {
-      return (this.bottom = $('.footer').outerHeight(true))
-    }
-  }
-})
-{% endhighlight %}
-
-
-### Options
-
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset-top="200"`.
-
-<div class="table-responsive">
-  <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>offset</td>
-       <td>number | function | object</td>
-       <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>
-
-### Events
-
-Bootstrap's affix plugin exposes a few events for hooking into affix functionality.
-
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 150px;">Event Type</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>affix.bs.affix</td>
-        <td>This event fires immediately before the element has been affixed.</td>
-      </tr>
-      <tr>
-        <td>affixed.bs.affix</td>
-        <td>This event is fired after the element has been affixed.</td>
-      </tr>
-      <tr>
-        <td>affix-top.bs.affix</td>
-        <td>This event fires immediately before the element has been affixed-top.</td>
-      </tr>
-      <tr>
-        <td>affixed-top.bs.affix</td>
-        <td>This event is fired after the element has been affixed-top.</td>
-      </tr>
-     <tr>
-      <td>affix-bottom.bs.affix</td>
-        <td>This event fires immediately before the element has been affixed-bottom.</td>
-      </tr>
-      <tr>
-        <td>affixed-bottom.bs.affix</td>
-        <td>This event is fired after the element has been affixed-bottom.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>

docs/migration.md

@@ -17,6 +17,7 @@ For a broader overview, see [what's new](http://blog.getbootstrap.com/DEAD-LINK-
 - Switched from LESS to SCSS for our source CSS files.
 - Added a new grid tier for ~`480px` and below.
 - Dropped Glyphicons icon font.
+- Dropped the Affix jQuery plugin. We recommend using a `position: sticky` polyfill instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations.
 - Refactored nearly all components to use more unnested classes instead of children selectors.
 - Non-responsive usage of Bootstrap is no longer supported.
 - Dropped the online Customizer in favor of more extensive setup documentation.

scss/_scaffolding.scss

@@ -8,10 +8,15 @@
 // Heads up! This reset may cause conflicts with some third-party widgets.
 // For recommendations on resolving such conflicts, see
 // http://getbootstrap.com/getting-started/#third-box-sizing
+// Credit: Jon Neal & CSS-Tricks
+// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+html {
+  box-sizing: border-box;
+}
 *,
 *:before,
 *:after {
-  box-sizing: border-box;
+  box-sizing: inherit;
 }
 
 

scss/_utilities.scss

@@ -61,11 +61,6 @@
 }
 
 
-// For Affix plugin
-.affix {
-  position: fixed;
-}
-
 // Alignment
 .text-left           { text-align: left; }
 .text-right          { text-align: right; }