Точки на прекъсване

Основни концепции

• Точките на прекъсване са градивните елементи на адаптивния дизайн. Използвайте ги, за да контролирате кога вашето оформление може да бъде адаптирано към конкретен екран или размер на устройството.

• Използвайте медийни заявки, за да проектирате вашия CSS чрез точка на прекъсване. Медийните заявки са функция на CSS, която ви позволява условно да прилагате стилове въз основа на набор от параметри на браузъра и операционната система. Най-често използваме min-widthв нашите медийни заявки.

• Мобилното първо място, отзивчивият дизайн е целта. CSS на Bootstrap има за цел да приложи минимума от стилове, за да накара оформлението да работи при най-малката точка на прекъсване, и след това наслоява стилове, за да коригира този дизайн за по-големи устройства. Това оптимизира вашия CSS, подобрява времето за изобразяване и осигурява страхотно изживяване за вашите посетители.

Налични точки на прекъсване

Bootstrap включва шест точки на прекъсване по подразбиране, понякога наричани нива на мрежата , за изграждане отзивчиво. Тези точки на прекъсване могат да бъдат персонализирани, ако използвате нашите изходни Sass файлове.

Всяка точка на прекъсване е избрана да държи удобно контейнери, чиито ширини са кратни на 12. Точките на прекъсване също са представителни за подмножество от общи размери на устройства и размери на прозореца за изглед – те не са насочени конкретно към всеки случай на употреба или устройство. Вместо това, диапазоните осигуряват здрава и последователна основа за изграждане на почти всяко устройство.

Тези точки на прекъсване могат да се персонализират чрез Sass — ще ги намерите в Sass карта в нашата таблица със _variables.scssстилове.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

За повече информация и примери как да модифицираме нашите Sass карти и променливи, моля, вижте раздела Sass на документацията на Grid .

Медийни запитвания

Тъй като Bootstrap е разработен първо да бъде мобилен, ние използваме шепа медийни заявки , за да създадем разумни точки на прекъсване за нашите оформления и интерфейси. Тези точки на прекъсване се основават най-вече на минимални ширини на прозореца за изглед и ни позволяват да увеличаваме мащаба на елементите, когато прозорецът за изглед се променя.

Мин. ширина

Bootstrap използва предимно следните диапазони на медийни заявки или точки на прекъсване в нашите изходни 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;
  }
}

Тези Sass миксини се превеждат в нашия компилиран CSS, използвайки стойностите, декларирани в нашите Sass променливи. Например:

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

Максимална ширина

Понякога използваме медийни заявки, които отиват в другата посока (съответния размер на екрана или по-малък ):

// 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;
  }
}

Тези миксини вземат тези декларирани точки на прекъсване, изваждат .02pxот тях и ги използват като наши max-widthстойности. Например:

// 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

Единична точка на прекъсване

Има също медийни заявки и миксини за насочване към един сегмент от размери на екрана, използвайки минималната и максималната ширина на точката на прекъсване.

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

Между точките на прекъсване

По подобен начин медийните заявки могат да обхващат множество ширини на точки на прекъсване:

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