Кропкі супыну

Асноўныя паняцці

• Кропкі супыну з'яўляюцца будаўнічымі блокамі адаптыўнага дызайну. Выкарыстоўвайце іх, каб кантраляваць, калі ваш макет можа быць адаптаваны да пэўнага акна прагляду або памеру прылады.

• Выкарыстоўвайце медыя-запыты для стварэння 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) { ... }