关于bootstrap:什么是-bootstrap-中的-break-point

60次阅读

共计 1353 个字符，预计需要花费 4 分钟才能阅读完成。

断点是 Bootstrap 中的触发器，用于触发布局响应依照设施或视口大小的变动而变动。

断点是响应式设计的基石。应用它们来管制您的布局何时能够适应特定的视口或设施大小。

应用 media query 通过断点来构建你的 CSS。媒体查问是 CSS 的一项性能，它容许您依据一组浏览器和操作系统参数有条件地利用款式。咱们最常在媒体查问中应用 min-width。

挪动优先 ，响应式设计是咱们须要达到的指标。
Bootstrap 的 CSS 旨在利用起码的款式来使布局在 最小 的断点处工作，而后对款式进行分层以针对更大的设施调整该设计。这能够优化您的 CSS，缩短渲染工夫，并为您的访问者提供杰出的体验。

Bootstrap 包含六个默认断点，有时称为 grid layers，用于响应式构建。如果您应用咱们的源 Sass 文件，能够自定义这些断点。

bootstrap 里默认的 media query：

每个断点大小被抉择为 12 的倍数，并代表常见设施大小和视口尺寸的子集。它们并不专门针对每个用例或设施，但提供范畴为构建响应式利用提供了弱小且统一的根底。

因为 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 按钮暗藏掉。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:

正文完