Punkty przerwania
Punkty przerwania to konfigurowalne szerokości, które określają zachowanie układu responsywnego w różnych rozmiarach urządzenia lub widocznego obszaru w Bootstrap.
Podstawowe koncepcje
-
Punkty przerwania to elementy konstrukcyjne responsywnego projektowania. Używaj ich do kontrolowania, kiedy układ można dostosować w określonym oknie roboczym lub rozmiarze urządzenia.
-
Użyj zapytań o media, aby zaprojektować CSS według punktu przerwania. Zapytania o media to funkcja CSS, która umożliwia warunkowe stosowanie stylów na podstawie zestawu parametrów przeglądarki i systemu operacyjnego. Najczęściej używamy
min-width
w naszych zapytaniach o media. -
Celem jest przede wszystkim mobilny, responsywny design. CSS Bootstrap ma na celu zastosowanie minimum stylów, aby układ działał w najmniejszym punkcie przerwania, a następnie nakładanie warstw na style, aby dostosować ten projekt do większych urządzeń. Optymalizuje to CSS, poprawia czas renderowania i zapewnia wspaniałe wrażenia dla odwiedzających.
Dostępne punkty przerwania
Bootstrap zawiera sześć domyślnych punktów przerwania, czasami nazywanych warstwami siatki , które służą do responsywnego budowania. Te punkty przerwania można dostosować, jeśli używasz naszych źródłowych plików Sass.
Punkt przerwania | Wrostek klasy | Wymiary |
---|---|---|
X-Mały | Nic | <576 pikseli |
Mały | sm |
≥576 pikseli |
Średni | md |
≥768px |
Wielki | lg |
≥992px |
Bardzo duży | xl |
≥1200px |
Bardzo duży | xxl |
≥1400 pikseli |
Każdy punkt przerwania został wybrany do wygodnego przechowywania kontenerów, których szerokość jest wielokrotnością 12. Punkty przerwania są również reprezentatywne dla podzbioru typowych rozmiarów urządzeń i wymiarów okienka ekranu — nie są przeznaczone dla każdego przypadku użycia lub urządzenia. Zamiast tego gama zapewnia mocną i spójną podstawę, na której można budować dla prawie każdego urządzenia.
Te punkty przerwania można dostosować za pomocą Sassa — znajdziesz je na mapie Sassa w naszym _variables.scss
arkuszu stylów.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Aby uzyskać więcej informacji i przykładów modyfikowania naszych map i zmiennych Sass, zapoznaj się z sekcją Sass w dokumentacji Grid .
Zapytania dotyczące mediów
Ponieważ Bootstrap został opracowany z myślą o urządzeniach mobilnych, używamy kilku zapytań o media, aby stworzyć sensowne punkty przerwania dla naszych układów i interfejsów. Te punkty przerwania opierają się głównie na minimalnych szerokościach widocznego obszaru i pozwalają nam skalować elementy w miarę zmian w widocznym obszarze.
Minimalna szerokość
Bootstrap używa głównie następujących zakresów zapytań o media — lub punktów przerwania — w naszych źródłowych plikach Sass dla naszego układu, systemu siatki i komponentów.
// 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;
}
}
Te mixiny Sass są tłumaczone w naszym skompilowanym CSS przy użyciu wartości zadeklarowanych w naszych zmiennych Sass. Na przykład:
// 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) { ... }
Maksymalna szerokość
Czasami korzystamy z zapytań o media, które idą w przeciwnym kierunku (podany rozmiar ekranu lub mniejszy ):
// 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;
}
}
Te domieszki pobierają zadeklarowane punkty przerwania, odejmuje .02px
od nich i używają ich jako naszych max-width
wartości. Na przykład:
// `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-
imax-
okien ekranu z szerokościami ułamkowymi (co może wystąpić w pewnych warunkach na przykład na urządzeniach o wysokiej rozdzielczości), używając wartości z większą precyzją.
Pojedynczy punkt przerwania
Istnieją również zapytania o media i domieszki do kierowania na pojedynczy segment rozmiarów ekranu przy użyciu minimalnej i maksymalnej szerokości punktu przerwania.
@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) { ... }
Na przykład @include media-breakpoint-only(md) { ... }
wynik w postaci:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
Między punktami przerwania
Podobnie zapytania o media mogą obejmować wiele szerokości punktów przerwania:
@include media-breakpoint-between(md, xl) { ... }
Co skutkuje w:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }