Punkty przerwania

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.

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) { ... }

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) { ... }