Преломне тачке

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

• Преломне тачке су градивни блокови респонзивног дизајна. Користите их да бисте контролисали када се ваш изглед може прилагодити одређеном пољу приказа или величини уређаја.

• Користите медијске упите да бисте дизајнирали свој ЦСС помоћу тачке прекида. Медијски упити су карактеристика ЦСС-а која вам омогућава да условно примените стилове на основу скупа параметара претраживача и оперативног система. Најчешће користимо min-widthу нашим медијским упитима.

• Пре свега мобилни, респонзивни дизајн је циљ. Боотстрап-ов ЦСС има за циљ да примени минималан број стилова како би распоред радио на најмањој тачки прекида, а затим слојеве на стилове да би прилагодио тај дизајн за веће уређаје. Ово оптимизује ваш ЦСС, побољшава време рендеровања и пружа одлично искуство за ваше посетиоце.

Доступне тачке прекида

Боотстрап укључује шест подразумеваних тачака прекида, које се понекад називају и слојеви мреже , за прављење одговора. Ове тачке прекида се могу прилагодити ако користите наше изворне Сасс датотеке.

Свака тачка прекида је изабрана да удобно држи контејнере чије су ширине вишеструке од 12. Преломне тачке су такође репрезентативне за подскуп уобичајених величина уређаја и димензија прозора – оне не циљају посебно сваки случај употребе или уређај. Уместо тога, опсези пружају снажну и конзистентну основу за надоградњу за скоро сваки уређај.

Ове тачке прекида се могу прилагодити преко Сасс-а—наћи ћете их у Сасс мапи у нашој _variables.scssтабели стилова.

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

За више информација и примера о томе како да измените наше Сасс мапе и варијабле, погледајте одељак Сасс у Грид документацији .

Медијски упити

Пошто је Боотстрап развијен да буде први мобилни, користимо прегршт медијских упита да креирамо разумне тачке прекида за наше изгледе и интерфејсе. Ове тачке прелома су углавном засноване на минималним ширинама оквира за приказ и омогућавају нам да увећамо елементе како се прозорчић мења.

Мин-видтх

Боотстрап првенствено користи следеће опсеге медијских упита — или тачке прекида — у нашим изворним Сасс датотекама за наш распоред, систем мреже и компоненте.

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

Ови Сасс миксини се преводе у наш преведени ЦСС користећи вредности декларисане у нашим Сасс варијаблама. На пример:

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