mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-29 06:49:06 +02:00
Merge branch 'v4-dev' into v4-docs-streamlined
This commit is contained in:
Mark Otto
@@ -1,11 +1,17 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Accessibility
|
||||
description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
|
||||
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.
|
||||
@@ -22,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"`.
|
||||
@@ -46,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](http://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)
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Best practices
|
||||
description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
@@ -14,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/)
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Browsers and devices
|
||||
description: Learn which browsers and devices are supported by Bootstrap.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
@@ -13,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.
|
||||
|
||||
@@ -93,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>
|
||||
@@ -104,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">
|
||||
@@ -143,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)
|
||||
@@ -167,11 +168,11 @@ 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
|
||||
|
||||
Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx) 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**.
|
||||
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
|
||||
@@ -188,7 +189,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
For more information and usage guidelines, read [Windows Phone 8 and Device-Width](http://timkadlec.com/2013/01/windows-phone-8-and-device-width/).
|
||||
For more information and usage guidelines, read [Windows Phone 8 and Device-Width](https://timkadlec.com/2013/01/windows-phone-8-and-device-width/).
|
||||
|
||||
As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.
|
||||
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Build tools
|
||||
description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more.
|
||||
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.
|
||||
@@ -19,7 +25,7 @@ To use our Gruntfile and run our documentation locally, you'll need a copy of Bo
|
||||
When completed, you'll be able to run the various Grunt commands provided from the command line.
|
||||
|
||||
[install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
|
||||
[gembundler]: http://bundler.io/
|
||||
[gembundler]: https://bundler.io/
|
||||
|
||||
## Using Grunt
|
||||
|
||||
@@ -29,7 +35,7 @@ Our Gruntfile includes the following commands and tasks:
|
||||
| --- | --- |
|
||||
| `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 test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](https://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. |
|
||||
|
||||
@@ -56,7 +62,7 @@ Running our documentation locally requires the use of Jekyll, a decently flexibl
|
||||
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/).
|
||||
Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Contents
|
||||
description: Learn about what's included in Bootstrap's precompiled and source code directories.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
@@ -12,7 +13,7 @@ Once downloaded, unzip the compressed folder and you'll see something like this:
|
||||
|
||||
<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too. -->
|
||||
|
||||
{% highlight bash %}
|
||||
{% highlight plaintext %}
|
||||
bootstrap/
|
||||
├── css/
|
||||
│ ├── bootstrap.css
|
||||
@@ -24,13 +25,13 @@ 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
|
||||
|
||||
The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
|
||||
|
||||
{% highlight bash %}
|
||||
{% highlight plaintext %}
|
||||
bootstrap/
|
||||
├── dist/
|
||||
│ ├── css/
|
||||
|
||||
@@ -1,15 +1,36 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Download
|
||||
description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
**Bootstrap v{{ site.current_version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
|
||||
|
||||
### Source files
|
||||
Download everything: 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).**
|
||||
## Contents
|
||||
|
||||
<a href="{{ site.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## 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, 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" 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" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
|
||||
## Bootstrap CDN
|
||||
|
||||
Skip the download and use the Bootstrap CDN to deliver Bootstrap's compiled CSS and JS to your project.
|
||||
|
||||
{% highlight html %}
|
||||
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
||||
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
|
||||
{% endhighlight %}
|
||||
|
||||
## Package managers
|
||||
|
||||
@@ -24,7 +45,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo
|
||||
Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap):
|
||||
|
||||
{% highlight bash %}
|
||||
$ npm install bootstrap@{{ site.current_version }}
|
||||
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.
|
||||
@@ -36,40 +57,34 @@ Bootstrap's `package.json` contains some additional metadata under the following
|
||||
|
||||
### RubyGems
|
||||
|
||||
Install Bootstrap in your Ruby apps using [Bundler](http://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](http://bundler.io/gemfile.html):
|
||||
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):
|
||||
|
||||
{% highlight bash %}
|
||||
$ composer require twbs/bootstrap:{{ site.current_version }}
|
||||
composer require twbs/bootstrap:{{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
### Bower
|
||||
|
||||
Install and manage Bootstrap's Sass and JavaScript using [Bower](http://bower.io).
|
||||
Install and manage Bootstrap's Sass and JavaScript using [Bower](https://bower.io).
|
||||
|
||||
{% highlight bash %}
|
||||
$ bower install bootstrap#v{{ site.current_version }}
|
||||
bower install bootstrap#v{{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
### NuGet
|
||||
@@ -77,32 +92,11 @@ $ bower install bootstrap#v{{ site.current_version }}
|
||||
If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org):
|
||||
|
||||
{% highlight powershell %}
|
||||
PM> Install-Package bootstrap -Pre
|
||||
PM> Install-Package bootstrap.sass -Pre
|
||||
Install-Package bootstrap -Pre
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight powershell %}
|
||||
Install-Package bootstrap.sass -Pre
|
||||
{% endhighlight %}
|
||||
|
||||
The `-Pre` is required until Bootstrap v4 has a stable release.
|
||||
|
||||
{% comment %}
|
||||
## Custom builds
|
||||
|
||||
Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag just what you need.
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h3>Reboot</h3>
|
||||
<p>Includes variables/mixins, Normalize, and Reboot. No JavaScript.</p>
|
||||
<a class="btn btn-bs btn-outline" href="#">Download</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Grid only</h3>
|
||||
<p>Includes variables/mixins and our grid system. No JavaScript.</p>
|
||||
<a class="btn btn-bs btn-outline" href="#">Download</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Flexbox</h3>
|
||||
<p>All of Bootstrap with flexbox enabled and <strong>lower browser support</strong>.</p>
|
||||
<a class="btn btn-bs btn-outline" href="#">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Flexbox
|
||||
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.
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Introduction
|
||||
description: Get started with Bootstrap using the Bootstrap CDN and a template starter page.
|
||||
group: getting-started
|
||||
redirect_from: "/getting-started/"
|
||||
---
|
||||
@@ -18,7 +19,7 @@ Here's how to quickly get started with the Bootstrap CDN and a template starter
|
||||
|
||||
## Quick start
|
||||
|
||||
Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
|
||||
Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download/)
|
||||
|
||||
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
|
||||
|
||||
@@ -41,7 +42,7 @@ And that's it—you're on your way to a fully Bootstrapped site. If you're at al
|
||||
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](http://stackoverflow.com/q/6771258))
|
||||
* 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:
|
||||
@@ -69,7 +70,7 @@ Put it all together and your pages should look like this:
|
||||
</html>
|
||||
{% endhighlight %}
|
||||
|
||||
That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
|
||||
That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview/) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
|
||||
|
||||
## Important globals
|
||||
|
||||
@@ -116,7 +117,7 @@ Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box
|
||||
|
||||
### Normalize.css
|
||||
|
||||
For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/).
|
||||
For improved cross-browser rendering, we use [Normalize.css](https://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/).
|
||||
|
||||
## Community
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: JavaScript
|
||||
description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Customization options
|
||||
description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
@@ -8,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:
|
||||
|
||||
@@ -31,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