Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into patch-1

5 files changed, 43 insertions, 32 deletions

diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md
index 0f98f0678..189cf1549 100644
--- a/docs/getting-started/browsers-devices.md
+++ b/docs/getting-started/browsers-devices.md
@@ -112,23 +112,27 @@ Internet Explorer 9 is also supported, however, please be aware that some CSS3 p
     </thead>
     <tbody>
       <tr>
-        <th scope="row"><code>border-radius</code></th>
+        <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a></th>
         <td class="text-success">Supported</td>
       </tr>
       <tr>
-        <th scope="row"><code>box-shadow</code></th>
+        <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code>box-shadow</code></a></th>
         <td class="text-success">Supported</td>
       </tr>
       <tr>
-        <th scope="row"><code>transform</code></th>
+        <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform"><code>transform</code></a></th>
         <td class="text-success">Supported, with <code>-ms</code> prefix</td>
       </tr>
       <tr>
-        <th scope="row"><code>transition</code></th>
+        <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition"><code>transition</code></a></th>
         <td class="text-danger">Not supported</td>
       </tr>
       <tr>
-        <th scope="row"><code>placeholder</code></th>
+        <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder"><code>placeholder</code></a></th>
+        <td class="text-danger">Not supported</td>
+      </tr>
+      <tr>
+        <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a></th>
         <td class="text-danger">Not supported</td>
       </tr>
     </tbody>
@@ -177,7 +181,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
       '@-ms-viewport{width:auto!important}'
     )
   )
-  document.querySelector('head').appendChild(msViewportStyle)
+  document.head.appendChild(msViewportStyle)
 }
 {% endhighlight %}
 
@@ -206,7 +210,7 @@ Page zooming inevitably presents rendering artifacts in some components, both in
 ## Sticky `:hover`/`:focus` on mobile
 Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make `:hover` "sticky". In other words, `:hover` styles start applying after tapping an element and only stop applying after the user taps some other element. On mobile-first sites, this behavior is normally undesirable.
 
-Bootstrap includes a workaround for this, although it is disabled by default. By setting `$use-hover-media-query` to `true` when compiling from Sass, Bootstrap will use [mq4-hover-shim](https://github.com/twbs/mq4-hover-shim) to disable `:hover` styles in browsers that emulate hovering, thus preventing sticky `:hover` styles. There are some caveats to this workaround; see the shim's documentation for details.
+Bootstrap includes a workaround for this, although it is disabled by default. By setting `$enable-hover-media-query` to `true` when compiling from Sass, Bootstrap will use [mq4-hover-shim](https://github.com/twbs/mq4-hover-shim) to disable `:hover` styles in browsers that emulate hovering, thus preventing sticky `:hover` styles. There are some caveats to this workaround; see the shim's documentation for details.
 
 ## Printing
 
@@ -214,7 +218,7 @@ Even in some modern browsers, printing can be quirky.
 
 In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. [See #12078 for some details.](https://github.com/twbs/bootstrap/issues/12078) Suggested workarounds:
 
-Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
+Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:
 
 {% highlight css %}
 @media print {
diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md
index adda6cbb1..0dabd30f9 100644
--- a/docs/getting-started/build-tools.md
+++ b/docs/getting-started/build-tools.md
@@ -13,7 +13,8 @@ To use our Gruntfile and run our documentation locally, you'll need a copy of Bo
 1. [Download and install Node](https://nodejs.org/download), which we use to manage our dependencies.
 2. Install the Grunt command line tools, `grunt-cli`, with `npm install -g grunt-cli`.
 3. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json](https://github.com/twbs/bootstrap/blob/master/package.json).
-4. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle`. This will install all Ruby dependencies, such as Jekyll and Sass linter.
+4. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
+  - **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
 
 When completed, you'll be able to run the various Grunt commands provided from the command line.
 
@@ -26,8 +27,8 @@ Our Gruntfile includes the following commands and tasks:
 
 | Task | Description |
 | --- | --- |
-| `grunt` | Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/) and [UglifyJS](http://lisperator.net/uglifyjs/).** |
-| `grunt dist` | `grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/) and [UglifyJS](http://lisperator.net/uglifyjs/).** |
+| `grunt` | Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
+| `grunt dist` | `grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
 | `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
 | `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. |
 | `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. |
@@ -41,18 +42,17 @@ Bootstrap will be compiled with [libsass][libsass] by default, but you can opt i
 
 For example, run `TWBS_SASS=sass grunt` to test and build Bootstrap with Ruby Sass.
 
-[ruby-sass]: https://github.com/sass/sass
-[grunt-contrib-sass]: https://github.com/gruntjs/grunt-contrib-sass
-[libsass]: https://github.com/sass/libsass
-[grunt-sass]: https://github.com/sindresorhus/grunt-sass
+## Autoprefixer
+
+Bootstrap uses [Autoprefixer][autoprefixer] (included in our Gruntfile and build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
+
 
 ## Local documentation
 
 Running our documentation locally requires the use of Jekyll, a decently flexible static site generator that provides us basic includes, Markdown-based files, templates, and more. Here's how to get it started:
 
-1. Run through the [tooling setup](#tooling-setup) above to install Jekyll (the site builder) and Rouge (our syntax highlighter).
-  - **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
-2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
+1. Run through the [tooling setup](#tooling-setup) above to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
+2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
 3. Open <http://localhost:9001> in your browser, and voilà.
 
 Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
@@ -60,3 +60,9 @@ Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com
 ## Troubleshooting
 
 Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
+
+[ruby-sass]: https://github.com/sass/sass
+[grunt-contrib-sass]: https://github.com/gruntjs/grunt-contrib-sass
+[libsass]: https://github.com/sass/libsass
+[grunt-sass]: https://github.com/sindresorhus/grunt-sass
+[autoprefixer]: https://github.com/postcss/autoprefixer
diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md
index 4e83b9994..eb5caa4bc 100644
--- a/docs/getting-started/download.md
+++ b/docs/getting-started/download.md
@@ -40,13 +40,13 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo
 
 Install and manage Bootstrap's Sass and JavaScript using [Bower](http://bower.io).
 
-{% highlight bash %}$ bower install bootstrap{% endhighlight %}
+{% highlight bash %}$ bower install bootstrap#v{{ site.current_version }}{% endhighlight %}
 
 ### npm
 
 Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap):
 
-{% highlight bash %}$ npm install bootstrap{% endhighlight %}
+{% highlight bash %}$ npm install bootstrap@{{ site.current_version }}{% endhighlight %}
 
 `require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
 
@@ -58,7 +58,7 @@ Bootstrap's `package.json` contains some additional metadata under the following
 ### Meteor
 
 {% highlight bash %}
-$ meteor add twbs:bootstrap
+$ meteor add twbs:bootstrap@={{ site.current_version }}
 {% endhighlight %}
 
 ### Composer
@@ -101,3 +101,4 @@ Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag
     <a class="btn btn-bs btn-outline" href="#">Download</a>
   </div>
 </div>
+
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
index 06ac547a2..6e9162c89 100644
--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.md
@@ -21,17 +21,17 @@ Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provide
 Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
 
 {% highlight html %}
-<link rel="stylesheet" href="{{ site.cdn.css }}">
+<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
 {% endhighlight %}
 
 Add our JavaScript plugins and jQuery near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
 
 {% highlight html %}
 <script src="{{ site.cdn.jquery }}"></script>
-<script src="{{ site.cdn.js }}"></script>
+<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
 {% endhighlight %}
 
-And that's it—you're your way to a fully Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
+And that's it—you're on your way to a fully Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
 
 ## Starter template
 
@@ -49,18 +49,18 @@ Put it all together and your pages should look like this:
   <head>
     <!-- Required meta tags always come first -->
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
 
     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="{{ site.cdn.css }}">
+    <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
   </head>
   <body>
     <h1>Hello, world!</h1>
 
     <!-- jQuery first, then Bootstrap JS. -->
     <script src="{{ site.cdn.jquery }}"></script>
-    <script src="{{ site.cdn.js }}"></script>
+    <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
   </body>
 </html>
 {% endhighlight %}
@@ -87,7 +87,7 @@ Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some fun
 Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your `<head>`.
 
 {% highlight html %}
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 {% endhighlight %}
 
 You can see an example of this in action in the [starter template](#starter-template).
@@ -119,10 +119,10 @@ For improved cross-browser rendering, we use [Normalize.css](http://necolas.gith
 Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
 
 - Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
-- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
-- Join [the official Slack room](https://bootstrap-slack.herokuapp.com).
+- Read and subscribe to [The Official Bootstrap Blog]({{ site.blog }}).
+- Join [the official Slack room]({{ site.slack }}).
 - Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
-- Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
+- Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)).
 - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
 
 You can also follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap) for the latest gossip and awesome music videos.
diff --git a/docs/getting-started/javascript.md b/docs/getting-started/javascript.md
index 75d835b60..debc4dcf5 100644
--- a/docs/getting-started/javascript.md
+++ b/docs/getting-started/javascript.md
@@ -73,7 +73,7 @@ $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Boot
 
 Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action.
 
-All infinitive events provide `preventDefault` functionality. This provides the ability to stop the execution of an action before it starts.
+All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts.
 
 {% highlight js %}
 $('#myModal').on('show.bs.modal', function (e) {