mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-24 14:04:09 +03:00
Merge branch 'v4-docs-streamlined' of https://github.com/twbs/bootstrap into v4-docs-streamlined
This commit is contained in:
Mark Otto
@@ -7,6 +7,11 @@ group: getting-started
|
||||
|
||||
Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Component requirements
|
||||
|
||||
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.
|
||||
@@ -23,7 +28,7 @@ In addition, groups and toolbars should be given an explicit label, as most assi
|
||||
|
||||
## Skip navigation
|
||||
|
||||
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).
|
||||
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 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"`.
|
||||
@@ -47,10 +52,10 @@ Note that this bug will also affect any other in-page links your site may be usi
|
||||
|
||||
When nesting headings (`<h1>` - `<h6>`), your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2>` - `<h6>` such that screen readers can construct a table of contents for your pages.
|
||||
|
||||
Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings).
|
||||
Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings/).
|
||||
|
||||
## Additional resources
|
||||
|
||||
- ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer)
|
||||
- [The A11Y Project](http://a11yproject.com/)
|
||||
- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Accessibility)
|
||||
- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
|
||||
|
||||
@@ -15,4 +15,5 @@ We've designed and developed Bootstrap to work in a number of environments. Here
|
||||
- Working with CSS
|
||||
- Working with Sass files
|
||||
- Building new CSS components
|
||||
- Ask in Slack
|
||||
- Working with flexbox
|
||||
- Ask in [Slack](https://bootstrap-slack.herokuapp.com/)
|
||||
|
||||
@@ -14,7 +14,7 @@ Bootstrap supports a wide variety of modern browsers and devices, and some older
|
||||
|
||||
## Supported browsers
|
||||
|
||||
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11 / Microsoft Edge**.
|
||||
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 10-11 / Microsoft Edge**.
|
||||
|
||||
Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.
|
||||
|
||||
@@ -94,7 +94,7 @@ Similarly, the latest versions of most desktop browsers are supported.
|
||||
<th scope="row">Windows</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<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>
|
||||
@@ -105,13 +105,13 @@ Similarly, the latest versions of most desktop browsers are supported.
|
||||
|
||||
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 8 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 and below, 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 9 & 10
|
||||
## Internet Explorer
|
||||
|
||||
Internet Explorer 9 & 10 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported.
|
||||
Internet Explorer 10+ is supported, however, IE9 down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
@@ -144,11 +144,11 @@ Internet Explorer 9 & 10 are also supported, however, please be aware that some
|
||||
|
||||
Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features.
|
||||
|
||||
## Supporting Internet Explorer 8
|
||||
## Supporting Internet Explorer 8-9
|
||||
|
||||
As of v4, Bootstrap no longer supports IE8. **If you require IE8 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.
|
||||
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 to Bootstrap 4. You'll need the following:
|
||||
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)
|
||||
@@ -168,7 +168,7 @@ Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> a
|
||||
|
||||
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/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge) for more information.
|
||||
See [this StackOverflow question](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do) for more information.
|
||||
|
||||
## Internet Explorer 10 in Windows Phone 8
|
||||
|
||||
|
||||
@@ -7,11 +7,16 @@ group: getting-started
|
||||
|
||||
Bootstrap uses [Grunt](http://gruntjs.com) for its CSS and JavaScript build system and Jekyll for the written documentation. Our Gruntfile includes convenient methods for working with the framework, including compiling code, running tests, and more.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Tooling setup
|
||||
|
||||
To use our Gruntfile and run our documentation locally, you'll need a copy of Bootstrap's source files, Node, and Grunt. Follow these steps and you should be ready to rock:
|
||||
|
||||
1. [Download and install Node](https://nodejs.org/download), which we use to manage our dependencies.
|
||||
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 install`. This will install all Ruby dependencies, such as Jekyll and plugins.
|
||||
|
||||
@@ -25,7 +25,7 @@ bootstrap/
|
||||
└── bootstrap.min.js
|
||||
{% endhighlight %}
|
||||
|
||||
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
|
||||
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
|
||||
|
||||
## Bootstrap source code
|
||||
|
||||
|
||||
@@ -16,14 +16,14 @@ group: getting-started
|
||||
|
||||
## Bootstrap CSS and JS
|
||||
|
||||
**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, flexbox-enabled, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files.
|
||||
**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files.
|
||||
|
||||
<a href="{{ site.download.dist }}" class="btn btn-lg btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
|
||||
<a href="{{ site.download.dist }}" class="btn btn-lg btn-bs" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
|
||||
|
||||
## Source files
|
||||
**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).
|
||||
|
||||
<a href="{{ site.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
<a href="{{ site.download.source }}" class="btn btn-bs" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
|
||||
## Bootstrap CDN
|
||||
|
||||
@@ -62,23 +62,17 @@ Bootstrap's `package.json` contains some additional metadata under the following
|
||||
Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
|
||||
|
||||
{% highlight ruby %}
|
||||
gem 'bootstrap', '~> 4.0.0.alpha3'
|
||||
gem 'bootstrap', '~> 4.0.0.alpha5'
|
||||
{% endhighlight %}
|
||||
|
||||
Alternatively, if you're not using Bundler, you can install the gem by running this command:
|
||||
|
||||
{% highlight bash %}
|
||||
gem install bootstrap -v 4.0.0.alpha3
|
||||
gem install bootstrap -v 4.0.0.alpha5
|
||||
{% endhighlight %}
|
||||
|
||||
[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.
|
||||
|
||||
### Meteor
|
||||
|
||||
{% highlight bash %}
|
||||
meteor add twbs:bootstrap@={{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
### Composer
|
||||
|
||||
You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org):
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Flexbox
|
||||
description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## What's included
|
||||
|
||||
Flexbox support is available for a number of Bootstrap's components:
|
||||
|
||||
- The entire grid system (mixins and predefined classes), which switch from `float`s to `display: flex;`.
|
||||
- Input groups, which move from `display: table;` to `display: flex;`.
|
||||
- The media component moves from `display: table;` and a number of hacky styles to a simple `display: flex;`.
|
||||
|
||||
Vendor prefixes are provided in our compiled CSS with [Autoprefixer](https://github.com/postcss/autoprefixer) via Grunt. Some bugs in IE10-11's Flexbox implementation are worked around via [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes).
|
||||
|
||||
## Why flexbox?
|
||||
|
||||
In a nutshell, flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides:
|
||||
|
||||
- Easy vertical alignment of content within a parent element.
|
||||
- Easy reordering of content across devices and screen resolutions with the help of media queries.
|
||||
- Easy CSS-only equal height columns for your grid-based layouts.
|
||||
|
||||
All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right.
|
||||
|
||||
## How it works
|
||||
|
||||
If you're familiar with modifying variables in Sass—or any other CSS preprocessor—you'll be right at home to move into flexbox mode.
|
||||
|
||||
1. Open the `_variables.scss` file and find the `$enable-flex` variable.
|
||||
2. Change it from `false` to `true`.
|
||||
3. Recompile, and done!
|
||||
|
||||
Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download/) for more information.
|
||||
|
||||
## Browser support
|
||||
|
||||
Enabling flexbox means **reduced browser and device support:**
|
||||
|
||||
- Internet Explorer 9 and below do not support flexbox.
|
||||
- Internet Explorer 10 has a few known quirks (see the "Known issues" tab in [Can I use...](http://caniuse.com/#feat=flexbox)), requires using a prefix, and only supports the syntax from the old 2012 version of the spec.
|
||||
|
||||
Please be extra conscious of your user base when enabling flexbox in your project. Visit [Can I use...](http://caniuse.com/#feat=flexbox) for details on browser support of flexbox.
|
||||
@@ -9,7 +9,7 @@ Customize Bootstrap 4 with our built-in custom variables file and easily toggle
|
||||
|
||||
## Customizing variables
|
||||
|
||||
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.**
|
||||
Bootstrap 4 ships with a `_custom.scss` file for easy overriding of default variables in `/scss/_variables.scss`. Copy and paste relevant lines from there into the `_custom.scss` file, modify the values, 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:
|
||||
|
||||
@@ -32,7 +32,6 @@ You can find and customize these variables for key global options in our `_varia
|
||||
| Variable | Values | Description |
|
||||
| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities. |
|
||||
| `$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` styles on various components. |
|
||||
|
||||
Reference in New Issue
Block a user