有人可以解释一下Bootstrap 4中的media-breakpoint-up
,media-breakpoint-down
,media-breakpoint-between
和media-breakpoint-only
吗?
这些与CSS媒体查询有关。当页面大小从台式机,平板电脑更改为移动设备尺寸时,它们用于设置断点。
这里是所有细节的绝佳资源:https://getbootstrap.com/docs/4.3/layout/overview/
虽然所有Bootstrap 4 breakpoint
标签在某些方面都与CSS媒体查询有关,但是您在问题中引用的标签与SASS mixins有关
引自Bootstrap 4:“自从我们使用Sass编写源CSS以来,所有媒体查询都可以通过Sass mixins获得:”
// 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: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
关于各种标签-down
-between
和only
的继续说明,可以在Bootstrap 4网站上找到>>> https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints