diff --git a/CHANGELOG.md b/CHANGELOG.md index f49a764018a..a3a4b87267f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2032,7 +2032,7 @@ Released: (2019-02-14) - **table:** add support for transitions on tbody element ([#1821](https://github.com/bootstrap-vue/bootstrap-vue/issues/1821)) ([#2450](https://github.com/bootstrap-vue/bootstrap-vue/issues/2450)) - ([91514af](https://github.com/bootstrap-vue/bootstrap-vue/commit/91514af)) + ([91514af](https://github.com/bootstrap-vue/bootstrap-vue/commit/91514af445221286ef0bc55985556d58e3c54fdc)) - **table:** add table row middle click (auxclicked) event ([#2425](https://github.com/bootstrap-vue/bootstrap-vue/issues/2425)) ([23250a2](https://github.com/bootstrap-vue/bootstrap-vue/commit/23250a2)) @@ -2261,7 +2261,7 @@ Released: 2018-04-01 ### Bug Fixes v2.0.0-rc.4 - **build:** don't exclude lodash.get - ([543c3c2](https://github.com/bootstrap-vue/bootstrap-vue/commit/543c3c2)) + ([543c3c2](https://github.com/bootstrap-vue/bootstrap-vue/commit/543c3c2f9aeccffb03c571aeea93333774243ab3)) - **card:** pass children instead of default prop to sub-components ([63b35e3](https://github.com/bootstrap-vue/bootstrap-vue/commit/63b35e3)) diff --git a/src/components/layout/README.md b/src/components/layout/README.md index 0a2985b6ba9..8c4581f3d24 100644 --- a/src/components/layout/README.md +++ b/src/components/layout/README.md @@ -11,9 +11,10 @@ functional layout components. ## How it works -Bootstrap's grid system uses a series of containers, rows, and columns to lay out and align content. -It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the -grid comes together. +Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. +It's built with +[flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) +and is fully responsive. Below is an example and an in-depth look at how the grid comes together. ```html @@ -29,17 +30,18 @@ grid comes together. The above example creates three equal-width columns on small, medium, large, and extra large devices using Bootstrap v4's predefined grid classes. Those columns are centered in the page with the parent -.container. - -Here's how it works: - -- Containers provide a means to center your site's contents. Use `` for fixed width or - `` for full width. -- Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the - negative margin method on `` to ensure all your content is aligned properly down the left - side. -- Content should be placed within `` columns, and only columns may be immediate children of - ``. +`.container`. + +Breaking it down, here's how it works: + +- Containers provide a means to center and horizontally pad your site's contents. Use + `` for a responsive pixel width or `` for `width: 100%` across all + viewport and device sizes. +- Rows are wrappers for columns. Each column has horizontal `padding` (called a gutter) for + controlling the space between them. This `padding` is then counteracted on the rows with negative + margins. This way, all the content in your columns is visually aligned down the left side. +- In a grid layout, content must be placed within columns and only columns may be immediate children + of rows. - Thanks to flexbox, grid columns without a set width will automatically layout with equal widths. For example, four instances of `` will each automatically be 25% wide for small breakpoints. @@ -50,20 +52,21 @@ Here's how it works: possible 12 per row, at the various breakpoints. So, if you want three equal-width columns at breakpoint `sm`, you can use ``. the special value `auto` can be used to take up the remaining available column space in a row. -- Column widths, internally, are set in percentages, so they're always fluid and sized relative to - their parent element. -- Columns have horizontal padding to create the gutters between individual columns, however, you can - remove the margin from `` and padding from `` by setting the `no-gutters` prop on - ``. -- There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), - small, medium, large, and extra large. -- Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it - (e.g., `` applies to small, medium, large, and extra large devices). +- Column `width`s are set in percentages, so they're always fluid and sized relative to their parent + element. +- Columns have horizontal `padding` to create the gutters between individual columns, however, you + can remove the `margin` from `` and `padding` from `` by setting the `no-gutters` + prop on ``. +- To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: + all breakpoints (extra small), small, medium, large, and extra large. +- Grid breakpoints are based on minimum width media queries, meaning **they apply to that one + breakpoint and all those above it** (e.g., `` applies to small, medium, large, and + extra large devices, but not the first `xs` breakpoint). - You can use predefined grid classes or Sass mixins for more semantic markup. Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the -[inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). +[inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9). ## Containers `` @@ -109,7 +112,7 @@ the class `row` applied to it, or - in the case of [forms](/docs/components/form ## Grid options -While Bootstrap uses `ems` or `rems` for defining most sizes, `px`s are used for grid breakpoints +While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units). @@ -198,8 +201,8 @@ like ``. ### Equal-width columns -For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add -any number of unit-less classes for each breakpoint you need and every column will be the same +For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. +Add any number of unit-less classes for each breakpoint you need and every column will be the same width. ```html @@ -219,15 +222,16 @@ width. ``` -Equal-width columns can be broken into multiple lines, but there is a -[Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) -that prevents this from working without an explicit flex-basis or border. Our example works thanks -to the border being set; you can do the same with `.col { border: 1px solid transparent; }`. -Alternatively, you can set the flex-basis to the width of the column (e.g., -`.col { flex: 1 0 50%; }`). +### Equal-width multi-line + +Create equal-width columns that span multiple lines by inserting a `.w-100` where you want the +columns to break to a new line. Make the breaks responsive by mixing `.w-100` with some +[responsive display utilities](https://getbootstrap.com/docs/4.3/utilities/display/). -Both these fixes have been documented in a -[reduced test case outside Bootstrap](https://output.jsbin.com/micohor). +There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented +this from working without an explicit `flex-basis` or `border`. There are workarounds for older +browser versions, but they shouldn't be necessary if your target browsers don't fall into the buggy +versions. ```html diff --git a/src/components/table/README.md b/src/components/table/README.md index edb0e824b2a..07f41bc2f83 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1932,7 +1932,7 @@ sorts _before_ `z`) or Swedish set `sort-compare-locale="sv"` (in Swedish, `รค` **Notes:** - Refer to - [MDN `String.prototype.localeCompare()` documentation](https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) + [MDN `String.prototype.localeCompare()` documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) for details on the options object property values. - Refer to [MDN locales documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)