Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
Check
in English

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-widthw 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
Bardzo 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.scssarkuszu 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 .02pxod nich i używają ich jako naszych max-widthwartoś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) { ... }
Po co odejmować .02px? Przeglądarki nie obsługują obecnie zapytań kontekstowych zakresu , więc omijamy ograniczenia prefiksów 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) { ... }