断点是 Bootstrap 中的触发器,用于触发布局响应按照设备或视口大小的变化而变化。 断点是响应式设计的基石。 使用它们来控制您的布局何时可以适应特定的视口或设备大小。 使用 移动优先,响应式设计是我们需要达到的目标。 Bootstrap 的 CSS 旨在应用最少的样式来使布局在 Bootstrap 包括六个默认断点,有时称为 bootstrap 里默认的 media query: 每个断点大小被选择为 12 的倍数,并代表常见设备大小和视口尺寸的子集。 它们并不专门针对每个用例或设备,但提供范围为构建响应式应用提供了强大且一致的基础。 Media queries由于 Bootstrap 是采取了 modile first 的设计方针,因此我们使用一些媒体查询来为我们的布局和界面创建合理的断点。 这些断点主要基于最小视口(minimum viewport)宽度,并允许我们随着视口的变化放大元素。 下面这段代码的语义是: // Source 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) { ... }@include media-breakpoint-up(xxl) { ... }// Usage// 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; }} 在默认的屏幕尺寸即 x-small,min-width: 0 的情况下,隐藏具有 custom-class 的 DOM 元素。但是,在 sm 以及更大尺寸的屏幕上,使用 display:block 来显示。 同样,下列代码的语义: %cx-product-facet-navigation { min-width: 0; // hides the filter button in desktop experience @include media-breakpoint-up(lg) { button.dialog-trigger { display: none; } }} 在 lg breakpoint 代表的屏幕尺寸上,将具有 dialog-trigger 的 button 按钮隐藏掉。 |
|