From 447f9f696898a705523da1fcc91bfea594bbfe3c Mon Sep 17 00:00:00 2001 From: David De Sloovere Date: Mon, 30 Apr 2018 01:02:21 +0200 Subject: Doc update - remove media-breakpoint-up(xs) (#26316) * Doc update - remove media-breakpoint-up(xs) If media-breakpoint-down(xl) is not listed, then media-breakpoint-up(xs) does not need to be listed either. The above 4 media queries are now aligned with the 4 media-breakpoint-up mixins (just like their media-breakpoint-down counterparts). * Improve media-breakpoint-up/down docs --- docs/4.1/layout/overview.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) (limited to 'docs') diff --git a/docs/4.1/layout/overview.md b/docs/4.1/layout/overview.md index 0b2f44d33f..102e25727d 100644 --- a/docs/4.1/layout/overview.md +++ b/docs/4.1/layout/overview.md @@ -52,7 +52,7 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in {% highlight scss %} // Extra small devices (portrait phones, less than 576px) -// No media query since this is the default in Bootstrap +// No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } @@ -70,15 +70,18 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in Since we write our source CSS in Sass, all our media queries are available via Sass mixins: {% highlight scss %} -@include media-breakpoint-up(xs) { ... } +// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } -// Example usage: +// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint +.custom-class { + display: none; +} @include media-breakpoint-up(sm) { - .some-class { + .custom-class { display: block; } } @@ -112,6 +115,14 @@ Once again, these media queries are also available via Sass mixins: @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } +// No media query necessary for xl breakpoint as it has no upper bound on its width + +// Example: Style from medium breakpoint and down +@include media-breakpoint-down(md) { + .custom-class { + display: block; + } +} {% endhighlight %} There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. -- cgit v1.2.3