斷點(diǎn)是 Bootstrap 中的觸發(fā)器，用于觸發(fā)布局響應(yīng)按照設(shè)備或視口大小的變化而變化。

斷點(diǎn)是響應(yīng)式設(shè)計(jì)的基石。 使用它們來控制您的布局何時可以適應(yīng)特定的視口或設(shè)備大小。

使用 media query 通過斷點(diǎn)來構(gòu)建你的 CSS。 媒體查詢是 CSS 的一項(xiàng)功能，它允許您根據(jù)一組瀏覽器和操作系統(tǒng)參數(shù)有條件地應(yīng)用樣式。 我們最常在媒體查詢中使用 min-width。

移動優(yōu)先，響應(yīng)式設(shè)計(jì)是我們需要達(dá)到的目標(biāo)。
Bootstrap 的 CSS 旨在應(yīng)用最少的樣式來使布局在最小的斷點(diǎn)處工作，然后對樣式進(jìn)行分層以針對更大的設(shè)備調(diào)整該設(shè)計(jì)。 這可以優(yōu)化您的 CSS，縮短渲染時間，并為您的訪問者提供出色的體驗(yàn)。

Bootstrap 包括六個默認(rèn)斷點(diǎn)，有時稱為 grid layers，用于響應(yīng)式構(gòu)建。 如果您使用我們的源 Sass 文件，可以自定義這些斷點(diǎn)。

bootstrap 里默認(rèn)的 media query：

每個斷點(diǎn)大小被選擇為 12 的倍數(shù)，并代表常見設(shè)備大小和視口尺寸的子集。 它們并不專門針對每個用例或設(shè)備，但提供范圍為構(gòu)建響應(yīng)式應(yīng)用提供了強(qiáng)大且一致的基礎(chǔ)。

Media queries

由于 Bootstrap 是采取了 modile first 的設(shè)計(jì)方針，因此我們使用一些媒體查詢來為我們的布局和界面創(chuàng)建合理的斷點(diǎn)。 這些斷點(diǎn)主要基于最小視口(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;} }

在默認(rèn)的屏幕尺寸即 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的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。