mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-21 13:24:08 +03:00
Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389)
* remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom
This commit is contained in:
Mark Otto
@@ -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
|
||||
- Working with flexbox
|
||||
- Ask in [Slack](https://bootstrap-slack.herokuapp.com/)
|
||||
|
||||
@@ -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>
|
||||
@@ -109,9 +109,9 @@ Unofficially, Bootstrap should look and behave well enough in Chromium and Chrom
|
||||
|
||||
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)
|
||||
|
||||
@@ -14,7 +14,7 @@ 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" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
|
||||
|
||||
|
||||
@@ -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.
|
||||
@@ -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