Merge branch 'v4-dev' into v4-split-buttons

author: Mark Otto <[email protected]> 2016-02-06 20:33:26 -0800
committer: Mark Otto <[email protected]> 2016-02-06 20:33:26 -0800
commit: d7d0e186bdfb52856a455c438538582fe95324e6 (patch)
tree: 43484b5b58471431662e0a8be2b3bb9eb7f00d31 /docs/getting-started
parent: f6ad665c26f8a376a806721feaf3f38ceadc7e79 (diff)
parent: cb7b78087690e756e33b6f6abdb3548f73f8bb1b (diff)
download: bootstrap-d7d0e186bdfb52856a455c438538582fe95324e6.tar.xz
bootstrap-d7d0e186bdfb52856a455c438538582fe95324e6.zip
4 files changed, 34 insertions, 12 deletions
diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md
index a67985398..147d9305e 100644
--- a/docs/getting-started/accessibility.md
+++ b/docs/getting-started/accessibility.md
@@ -25,7 +25,7 @@ In addition, groups and toolbars should be given an explicit label, as most assi
 If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
 
 {% callout danger %}
-Due to long-standing shortcomings/bugs in Chrome (see [issue 262171 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=262171 "Chromium bug tracker - Issue 262171: Focus should cycle from named anchor")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
+Due to long-standing shortcomings/bugs in Chrome (see [issue 454172 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=454172 "Chromium bug tracker - Issue 454172: Focus Link Target (sequential focus navigation starting point)")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
 
 In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with `tabindex="-1"` when they are clicked with the mouse) with `#content:focus { outline: none; }`.
 
diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md
index edb0a738f..d06845e90 100644
--- a/docs/getting-started/browsers-devices.md
+++ b/docs/getting-started/browsers-devices.md
@@ -195,7 +195,7 @@ As a heads up, we include this in all of Bootstrap's documentation and examples
 
 ### Overflow and scrolling
 
-Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll.
+Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
 
 ### Virtual keyboards
 
@@ -218,9 +218,13 @@ Bootstrap includes a workaround for this, although it is disabled by default. By
 
 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:
+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 [issue #12078](https://github.com/twbs/bootstrap/issues/12078) for some details. 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:
+* Embrace the extra-small grid and make sure your page looks acceptable under it.
+* Customize the value of the `$grid-breakpoints` Sass variable so that your printer paper is considered larger than extra-small.
+* Add custom media queries to change the grid size breakpoints for print media only.
+
+Also, as of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) for more details. One potential workaround is the following CSS:
 
 {% highlight css %}
 @media print {
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
index b35c4134b..8cec71fd6 100644
--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.md
@@ -27,8 +27,8 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee
 Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Tether first, as our code depends on them.
 
 {% highlight html %}
-<script src="{{ site.cdn.jquery }}"></script>
-<script src="{{ site.cdn.tether }}"></script>
+<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
+<script src="{{ site.cdn.tether }}" integrity="{{ site.cdn.tether_hash }}" crossorigin="anonymous"></script>
 <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
 {% endhighlight %}
 
@@ -60,8 +60,8 @@ Put it all together and your pages should look like this:
     <h1>Hello, world!</h1>
 
     <!-- jQuery first, then Tether, then Bootstrap JS. -->
-    <script src="{{ site.cdn.jquery }}"></script>
-    <script src="{{ site.cdn.tether }}"></script>
+    <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
+    <script src="{{ site.cdn.tether }}" integrity="{{ site.cdn.tether_hash }}" crossorigin="anonymous"></script>
     <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md
index 35ff5e3d0..0a98c40d3 100644
--- a/docs/getting-started/options.md
+++ b/docs/getting-started/options.md
@@ -4,11 +4,29 @@ title: Customization options
 group: getting-started
 ---
 
-With Bootstrap 4, we've added a handful of global options for easily customizing all the components in your project. These options are handled by Sass variables. Simply change a variable's value and recompile with the included Gruntfile.
+Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with the included Gruntfile as needed.
 
-## Available variables
+## Customizing variables
 
-You can find and customize these variables in our `_variables.scss` file.
+Bootstrap 4 ships with a `_custom.scss` file for easy variable overrides. Copy and paste relevant lines from `_variables.scss` into the custom file and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.**
+
+For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
+
+{% highlight scss %}
+// Bootstrap overrides
+//
+// Copy variables from `_variables.scss` to this file to override default values
+// without modifying source files.
+
+$body-bg:    $gray-dark;
+$body-color: $gray-light;
+{% endhighlight %}
+
+Do the same for any variable you need to override, including the global options listed below.
+
+## Global options
+
+You can find and customize these variables for key global options in our `_variables.scss` file.
 
 | Variable                    | Values                             | Description                                                             |
 | --------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
@@ -16,6 +34,6 @@ You can find and customize these variables in our `_variables.scss` file.
 | `$enable-flex`              | `true` or `false` (default)        | Swaps `float` and `display: table` styles for `display: flex`.          |
 | `$enable-rounded`           | `true` (default) or `false`        | Enables predefined `border-radius` styles on various components.        |
 | `$enable-shadows`           | `true` or `false` (default)        | Enables predefined `box-shadow` styles on various components.           |
-| `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` various components. |
+| `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components. |
 | `$enable-transitions`       | `true` (default) or `false`        | Enables predefined `transition`s on various components.                 |
 | `$enable-hover-media-query` | `true` or `false` (default)        | ...                                                                     |
author	Mark Otto <[email protected]>	2016-02-06 20:33:26 -0800
committer	Mark Otto <[email protected]>	2016-02-06 20:33:26 -0800
commit	d7d0e186bdfb52856a455c438538582fe95324e6 (patch)
tree	43484b5b58471431662e0a8be2b3bb9eb7f00d31 /docs/getting-started
parent	f6ad665c26f8a376a806721feaf3f38ceadc7e79 (diff)
parent	cb7b78087690e756e33b6f6abdb3548f73f8bb1b (diff)
download	bootstrap-d7d0e186bdfb52856a455c438538582fe95324e6.tar.xz bootstrap-d7d0e186bdfb52856a455c438538582fe95324e6.zip