斷點是 Bootstrap 中的觸發器，用于觸發布局響應按照設備或視口大小的變化而變化。

斷點是響應式設計的基石。 使用它們來控制您的布局何時可以適應特定的視口或設備大小。

使用 media query 通過斷點來構建你的 CSS。 媒體查詢是 CSS 的一項功能，它允許您根據一組瀏覽器和操作系統參數有條件地應用樣式。 我們最常在媒體查詢中使用 min-width。

移動優先，響應式設計是我們需要達到的目標。
Bootstrap 的 CSS 旨在應用最少的樣式來使布局在最小的斷點處工作，然后對樣式進行分層以針對更大的設備調整該設計。 這可以優化您的 CSS，縮短渲染時間，并為您的訪問者提供出色的體驗。

Bootstrap 包括六個默認斷點，有時稱為 grid layers，用于響應式構建。 如果您使用我們的源 Sass 文件，可以自定義這些斷點。

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 按鈕隱藏掉。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的什么是 bootstrap 中的 break point的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。