kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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
This commit is contained in:
David De Sloovere 2018-04-30 01:02:21 +02:00 committed by Mark Otto
parent c11132351e
commit 447f9f6968
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/4.1/layout/overview.md
View File

@ -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.