Үзіліс нүктелері

Негізгі ұғымдар

• Тоқтау нүктелері жауап беретін дизайнның құрылыс блоктары болып табылады. Орналасуыңызды белгілі бір көру портына немесе құрылғы өлшеміне қашан бейімдеуге болатынын бақылау үшін оларды пайдаланыңыз.

• Тоқтау нүктесі бойынша CSS құрастыру үшін медиа сұрауларын пайдаланыңыз. Мультимедиалық сұраулар – браузер мен операциялық жүйе параметрлерінің жиынтығы негізінде мәнерлерді шартты түрде қолдануға мүмкіндік беретін CSS мүмкіндігі. Біз көбінесе min-widthмедиа сұрауларымызда қолданамыз.

• Ең алдымен мобильді, сезімтал дизайн - мақсат. Bootstrap CSS бағдарламасы макеттің ең кіші тоқтау нүктесінде жұмыс істеуі үшін стильдердің ең аз мөлшерін қолдануға, содан кейін үлкенірек құрылғылар үшін сол дизайнды реттеу үшін стильдерге қабаттарды қолдануға бағытталған. Бұл сіздің CSS-ті оңтайландырады, көрсету уақытын жақсартады және келушілерге тамаша тәжірибе береді.

Қолжетімді тоқтау нүктелері

Bootstrap жауапты құру үшін кейде тор деңгейлері деп аталатын алты әдепкі тоқтау нүктесін қамтиды. Біздің бастапқы Sass файлдарын пайдалансаңыз, бұл тоқтау нүктелерін теңшеуге болады.

Әрбір тоқтау нүктесі ені 12-ге еселік болатын контейнерлерді ыңғайлы ұстау үшін таңдалды. Үзіліс нүктелері жалпы құрылғы өлшемдерінің және қарау алаңының өлшемдерінің ішкі жиынының өкілі болып табылады — олар әрбір пайдалану жағдайын немесе құрылғыны арнайы мақсаттамайды. Оның орнына, диапазондар кез келген дерлік құрылғы үшін берік және дәйекті негізді қамтамасыз етеді.

_variables.scssБұл тоқтау нүктелерін Sass арқылы теңшеуге болады — сіз оларды стиль кестеміздегі Sass картасында таба аласыз .

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

Sass карталары мен айнымалы мәндерін өзгерту жолы туралы қосымша ақпарат пен мысалдар алу үшін Grid құжаттамасының Sass бөлімін қараңыз .

БАҚ сұраулары

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