斷點(diǎn)（Breakpoints）
斷點(diǎn)是可自定義的寬度，用于確定Bootstrap中如何跨設(shè)備或視口大小執(zhí)行響應(yīng)布局。
核心概念
-
斷點(diǎn)是響應(yīng)式設(shè)計(jì)的基石。使用它們可以控制何時(shí)可以在特定視口或設(shè)備大小下調(diào)整布局。
-
使用媒體查詢(xún)通過(guò)斷點(diǎn)構(gòu)建CSS。媒體查詢(xún)是CSS的一項(xiàng)功能，它允許您根據(jù)一組瀏覽器和操作系統(tǒng)參數(shù)有條件地應(yīng)用樣式。我們?cè)诿襟w查詢(xún)中最常用的是最小寬度。
-
移動(dòng)第一，響應(yīng)性設(shè)計(jì)是我們的目標(biāo)。Bootstrap的CSS旨在應(yīng)用最少的樣式，使布局在最小的斷點(diǎn)處工作，然后對(duì)樣式進(jìn)行分層，以便為更大的設(shè)備調(diào)整設(shè)計(jì)。這優(yōu)化了您的CSS，提高了渲染時(shí)間，并為您的訪問(wèn)者提供了極好的體驗(yàn)。
可用斷點(diǎn)
Bootstrap包括六個(gè)默認(rèn)斷點(diǎn)，有時(shí)稱(chēng)為網(wǎng)格層，用于響應(yīng)地構(gòu)建。如果您使用的是我們的源Sass文件，則可以自定義這些斷點(diǎn)。
| 斷點(diǎn) | 類(lèi)中綴 | 分辨率 |
|---|---|---|
| X-Small | None | <576px |
| Small | sm |
≥576px |
| Medium | md |
≥768px |
| Large | lg |
≥992px |
| Extra large | xl |
≥1200px |
| Extra extra large | xxl |
≥1400px |
每個(gè)斷點(diǎn)都被選擇用來(lái)容納寬度為12倍的容器。斷點(diǎn)也代表了常見(jiàn)設(shè)備尺寸和視口尺寸的子集，它們并不是專(zhuān)門(mén)針對(duì)每個(gè)用例或設(shè)備的。相反，這些范圍為幾乎任何設(shè)備提供了堅(jiān)固和一致的基礎(chǔ)。
這些斷點(diǎn)可以通過(guò)Sass進(jìn)行自定義，您可以在我們網(wǎng)站的Sass地圖中找到它們_variables.scss 樣式表。
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
有關(guān)如何修改Sass映射和變量的更多信息和示例，請(qǐng)參閱網(wǎng)格文檔的Sass部分。
媒體查詢(xún)
由于Bootstrap的開(kāi)發(fā)首先是移動(dòng)的，所以我們使用少量的媒體查詢(xún)?yōu)槲覀兊牟季趾徒涌趧?chuàng)建合理的斷點(diǎn)。這些斷點(diǎn)主要基于最小視口寬度，允許我們?cè)谝暱诟臅r(shí)放大元素。
最小寬度
Bootstrap主要使用源Sass文件中的以下媒體查詢(xún)范圍或斷點(diǎn)來(lái)進(jìn)行布局、網(wǎng)格系統(tǒng)和組件。
// 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;
}
}
這些Sass mixin使用Sass變量中聲明的值在編譯的CSS中進(jìn)行轉(zhuǎn)換。例如：
// 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) { ... }
最大寬度
We occasionally use media queries that go in the other direction (the given screen size or smaller):
// 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;
}
}
這些mixin獲取那些聲明的斷點(diǎn)，從中減去.02px，并將它們用作我們的最大寬度值。例如：
// 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
單斷點(diǎn)
還有媒體查詢(xún)和mixin，用于使用最小和最大斷點(diǎn)寬度針對(duì)單個(gè)屏幕大小段。
@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) { ... }
For example the @include media-breakpoint-only(md) { ... } will result in :
@media (min-width: 768px) and (max-width: 991.98px) { ... }
斷點(diǎn)之間
類(lèi)似地，媒體查詢(xún)可能跨越多個(gè)斷點(diǎn)寬度：
@include media-breakpoint-between(md, xl) { ... }
結(jié)果是：
// Example
// 應(yīng)用從中型設(shè)備到超大設(shè)備的樣式
@media (min-width: 768px) and (max-width: 1199.98px) { ... }