mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-02 16:04:07 +03:00
Merge branch 'v4-dev' into v4-docs-streamlined
This commit is contained in:
Mark Otto
@@ -16,10 +16,6 @@ Bootstrap follows common web standards and—with minimal extra effort—can be
|
||||
|
||||
Some common HTML elements are always in need for basic accessibility enhancements through `role`s and Aria attributes. Below is a list of some of the most frequently used ones.
|
||||
|
||||
{% callout info %}
|
||||
**Heads up!** As we go through the alphas, we'll be moving more accessibility notes here with links to specific sections from other areas of the docs.
|
||||
{% endcallout %}
|
||||
|
||||
### Button groups
|
||||
|
||||
In order for assistive technologies–such as screen readers–to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
|
||||
|
||||
@@ -22,161 +22,102 @@ Alternative browsers which use the latest version of WebKit, Blink, or Gecko, wh
|
||||
|
||||
Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Safari</th>
|
||||
<th>Android Browser & WebView</th>
|
||||
<th>Microsoft Edge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Android</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Android v5.0+ supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">iOS</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows 10 Mobile</th>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table table-bordered table-striped table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Safari</th>
|
||||
<th>Android Browser & WebView</th>
|
||||
<th>Microsoft Edge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Android</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Android v5.0+ supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">iOS</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows 10 Mobile</th>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Desktop browsers
|
||||
|
||||
Similarly, the latest versions of most desktop browsers are supported.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Internet Explorer</th>
|
||||
<th>Microsoft Edge</th>
|
||||
<th>Opera</th>
|
||||
<th>Safari</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Mac</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported, IE10+</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-danger">Not supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table table-bordered table-striped table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Internet Explorer</th>
|
||||
<th>Microsoft Edge</th>
|
||||
<th>Opera</th>
|
||||
<th>Safari</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Mac</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported, IE10+</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-danger">Not supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/faq/) version of Firefox.
|
||||
|
||||
Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9 and below, though they are not officially supported.
|
||||
Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9, though they are not officially supported.
|
||||
|
||||
For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{ site.baseurl }}/browser-bugs/).
|
||||
|
||||
## Internet Explorer
|
||||
|
||||
Internet Explorer 10+ is supported, however, IE9 down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported.
|
||||
Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Feature</th>
|
||||
<th scope="col">Internet Explorer 9</th>
|
||||
<th scope="col">Internet Explorer 10</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
<td class="text-success">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>
|
||||
<td class="text-warning">Partially supported, with <code>-ms</code> prefix<br><a href="http://caniuse.com/#feat=flexbox">See <em>Can I use</em> for details</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features.
|
||||
|
||||
## Supporting Internet Explorer 8-9
|
||||
|
||||
As of v4, Bootstrap no longer supports IE8 or IE9. **If you require IE8-9 support, we recommend you use Bootstrap 3.** It's still supported by our team for bugfixes and documentation changes, but no new features will be added to it.
|
||||
|
||||
Alternatively, you may add some third party JavaScript to backfill support for IE8-9 to Bootstrap 4. You'll need the following:
|
||||
|
||||
* [The HTML5 shiv](https://en.wikipedia.org/wiki/HTML5_Shiv)
|
||||
* [Respond.js](https://github.com/scottjehl/Respond)
|
||||
* [Rem unit polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill)
|
||||
|
||||
No support will be provided for this, though you may find some help from the community in [our Slack channel]({{ site.slack }}).
|
||||
|
||||
## IE Compatibility modes
|
||||
|
||||
Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate `<meta>` tag in your pages:
|
||||
|
||||
{% highlight html %}
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
{% endhighlight %}
|
||||
|
||||
Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".
|
||||
|
||||
This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.
|
||||
|
||||
See [this StackOverflow question](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do) for more information.
|
||||
**If you require IE8-9 support, use Bootstrap 3.** It's the most stable version of our code and is still supported by our team for critical bugfixes and documentation changes. However, no new features will be added to it.
|
||||
|
||||
## Internet Explorer 10 in Windows Phone 8
|
||||
|
||||
Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
|
||||
|
||||
{% highlight js %}
|
||||
// Copyright 2014-2015 The Bootstrap Authors
|
||||
// Copyright 2014-2015 Twitter, Inc.
|
||||
// Copyright 2014-2017 The Bootstrap Authors
|
||||
// Copyright 2014-2017 Twitter, Inc.
|
||||
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||
var msViewportStyle = document.createElement('style')
|
||||
|
||||
@@ -39,15 +39,6 @@ Our Gruntfile includes the following commands and tasks:
|
||||
| `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. |
|
||||
|
||||
## Switching Sass compilers
|
||||
|
||||
Bootstrap will be compiled with [libsass][libsass] by default, but you can opt into traditional Ruby Sass by setting the `TWBS_SASS` environment variable. Two options are supported:
|
||||
|
||||
* `libsass` (default) to use [libsass][libsass] via [grunt-sass][grunt-sass].
|
||||
* `sass` to use [Ruby Sass][ruby-sass] via [grunt-contrib-sass][grunt-contrib-sass].
|
||||
|
||||
For example, run `TWBS_SASS=sass grunt` to test and build Bootstrap with Ruby 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.
|
||||
@@ -68,8 +59,4 @@ Learn more about using Jekyll by reading its [documentation](https://jekyllrb.co
|
||||
|
||||
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
|
||||
|
||||
@@ -36,10 +36,6 @@ Skip the download and use the Bootstrap CDN to deliver Bootstrap's compiled CSS
|
||||
|
||||
Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)** for a setup that matches our official compiled versions.
|
||||
|
||||
{% callout warning %}
|
||||
**Heads up!** Not all package managers have the v4 alpha published yet, but we should have them up shortly!
|
||||
{% endcallout %}
|
||||
|
||||
### npm
|
||||
|
||||
Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap):
|
||||
|
||||
@@ -27,7 +27,7 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee
|
||||
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
||||
{% endhighlight %}
|
||||
|
||||
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.
|
||||
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. While we use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/) in our docs, the full version is also supported.
|
||||
|
||||
{% highlight html %}
|
||||
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
|
||||
@@ -39,22 +39,15 @@ And that's it—you're on your way to a fully Bootstrapped site. If you're at al
|
||||
|
||||
## Starter template
|
||||
|
||||
Be sure to have your pages set up with the latest design and development standards. That means:
|
||||
|
||||
* Using an HTML5 doctype
|
||||
* Forcing Internet Explorer to use its latest rendering mode ([read more](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do))
|
||||
* And, utilizing the viewport meta tag.
|
||||
|
||||
Put it all together and your pages should look like this:
|
||||
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
|
||||
|
||||
{% highlight html %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags always come first -->
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<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 }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
||||
|
||||
@@ -38,3 +38,4 @@ You can find and customize these variables for key global options in our `_varia
|
||||
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
|
||||
| `$enable-hover-media-query` | `true` or `false` (default) | ... |
|
||||
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
|
||||
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |
|
||||
|
||||
Reference in New Issue
Block a user