View on GitHub

斷點 (Breakpoints)

斷點是 Bootstrap 中的觸發器，用於控制排版如何在不同的設備或視區大小進行響應式的變化。

On this page

核心觀念

斷點是響應式開發的基礎。 使用斷點來控制在特定尺寸或設備上調整佈局。
使用 media queries 的斷點構建 CSS。 media queries 是 CSS 的一個特性，它允許您根據瀏覽器和操作系統参數有條件地套用樣式。我們最常在 media queries 中使用 min-width.
在響應式開發中，主要會以行動版為優先。 Bootstrap 的 CSS 旨在使用最少的樣式來使佈局在最小的斷點處工作，然後在樣式上分層以針對較大的設備調整該設計。這樣可以優化CSS，縮短渲染時間，並為訪問者提供出色的體驗。

網格選項

Bootstrap 預設默認六個斷點（有時候會稱之為網格），主要用於建立響應式開發。如果您是使用我們的 Sass 原始碼，則可以自定義這些斷點。

Breakpoint	Class infix	Dimensions
X-Small	None	<576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px

每個斷點主要是為了容納寬度為 12 倍數的容器。這些斷點也代表了常見尺寸以及可視區域—但它們並非專門針對每個設備。取而代之的是，這些範圍幾乎是所有設備基礎。

這些斷點可通過 Sass 原始碼自行進行自定義-您可以在 _variables.scss 的 Sass 中找到它們。

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

有關如何修改 Sass 和變數的更多訊息與範例，請参閱網格章節.

Media queries

Bootstrap 主要是以行動版為優先，因此我們使用了許多 media queries 建立豐富的中斷點用於排版和畫面。這些中斷點大部分基於最小 viewport，並且允許我們隨著 viewport 的變化放大元件。

最小寬度

Bootstrap 主要使用以下 media queries 或中斷點針對我們的佈局、網格系統、和元件在的我們的 Sass 檔中。

// 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;
  }
}

由於我們將 CSS 寫入 Sass，通過 Sass mixins 我們可以使用 media queries。例如：

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

最大寬度

我們有時候使用 media queries 作為它的指引（給定的螢幕尺寸或更小）：

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

這些 mixins 使用那些聲明的斷點，從中減去 .02px ，並將其用作我們的 max-width 值：

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.

特定斷點

也有 media queries 和 mixins 使用最小和最大斷點寬度來定義特定的螢幕區間。

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

例如， @include media-breakpoint-only(md) { ... } 結果將會是 :

@media (min-width: 768px) and (max-width: 991.98px) { ... }

範圍斷點

同樣，media queries 可以跨越多個斷點寬度：

@include media-breakpoint-between(md, xl) { ... }

結果是：

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }