mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 14:30:46 +02:00
Code Issues Releases Wiki Activity

Change breakpoint-max implementation

Browse Source 
- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
This commit is contained in:
Martijn Cuppens
2020-04-18 13:02:26 +02:00
committed by Mark Otto
parent aee711bfa9
commit 7e28764e67
8 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
site/content/docs/5.0/layout/breakpoints.md
View File

@@ -127,12 +127,12 @@ These Sass mixins translate in our compiled CSS using the values declared in our
We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
{{< highlight scss >}}
@include media-breakpoint-down(xs) { ... }
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
// No media query necessary for xxl breakpoint as it has no upper bound on its width
@include media-breakpoint-down(xxl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
@@ -181,18 +181,25 @@ There are also media queries and mixins for targeting a single segment of screen
@include media-breakpoint-only(xxl) { ... }
{{< /highlight >}}
For example the `@include media-breakpoint-only(md) { ... }` will result in :
{{< highlight scss >}}
@media (min-width: 768px) and (max-width: 991.98px) { ... }
{{< /highlight >}}
### Between breakpoints
Similarly, media queries may span multiple breakpoint widths:
{{< highlight scss >}}
@include media-breakpoint-between(md, xl) { ... }
{{< /highlight >}}
Which results in:
{{< highlight scss >}}
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
{{< /highlight >}}
### Between breakpoints
The Sass mixin for targeting the same screen size range would be:
{{< highlight scss >}}
@include media-breakpoint-between(md, xl) { ... }
{{< /highlight >}}

2
site/content/docs/5.0/migration.md
View File

@@ -48,6 +48,8 @@ Changes to our source Sass files and compiled CSS.
- `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`.
- Linear gradients are simplified when gradients are enabled and therefore, `gradient-bg()` now only accepts an optional `$color` parameter.
- The `bg-gradient-variant()` mixin is removed since the `.bg-gradient` class can now be used to add gradients to elements instead of the `.bg-gradient-*` classes.
- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
## JavaScript