斷點 (Breakpoints)
斷點是 Bootstrap 中的觸發器,用於控制排版如何在不同的設備或視區大小進行響應式的變化。
核心觀念
-
斷點是響應式開發的基礎。 使用斷點來控制在特定尺寸或設備上調整佈局。
-
使用 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
值:
// `xs` returns only a ruleset and no media query
// ... { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
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) { ... }