To'xtash nuqtalari

Asosiy tushunchalar

• To'xtash nuqtalari sezgir dizaynning qurilish bloklari hisoblanadi. Ulardan ma'lum bir ko'rish oynasi yoki qurilma o'lchamiga sizning tartibingiz qachon moslashtirilishi mumkinligini nazorat qilish uchun foydalaning.

• CSS-ni uzilish nuqtasi bo'yicha arxitektura qilish uchun media so'rovlaridan foydalaning. Media so'rovlar - bu brauzer va operatsion tizim parametrlari to'plami asosida shartli ravishda uslublarni qo'llash imkonini beruvchi CSS xususiyati. Biz eng ko'p min-widthmedia so'rovlarimizda foydalanamiz.

• Maqsad birinchi navbatda mobil, sezgir dizayn. Bootstrap-ning CSS-ning maqsadi eng kichik to'xtash nuqtasida tartibni ishlashi uchun minimal uslublarni qo'llash, so'ngra ushbu dizaynni kattaroq qurilmalar uchun sozlash uchun uslublar bo'yicha qatlamlarni qo'llashdir. Bu sizning CSS-ni optimallashtiradi, ko'rsatish vaqtini yaxshilaydi va tashrif buyuruvchilaringiz uchun ajoyib tajriba beradi.

Mavjud to'xtash nuqtalari

Bootstrap sezgir qurish uchun oltita standart to'xtash nuqtasini o'z ichiga oladi, ba'zan grid darajalari deb ataladi. Agar siz bizning manba Sass fayllarimizdan foydalansangiz, bu to'xtash nuqtalarini sozlash mumkin.

Har bir toʻxtash nuqtasi kengligi 12 ga karrali konteynerlarni qulay saqlash uchun tanlangan. Toʻxtash nuqtalari, shuningdek, umumiy qurilma oʻlchamlari va koʻrish oynasi oʻlchamlarining quyi toʻplamini ham ifodalaydi — ular har bir foydalanish holati yoki qurilmasiga maxsus moʻljallangan emas. Buning o'rniga, diapazonlar deyarli har qanday qurilma uchun mustahkam va izchil poydevor yaratadi.

_variables.scssUshbu to'xtash nuqtalarini Sass orqali sozlash mumkin — ularni uslublar jadvalimizdagi Sass xaritasida topasiz .

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

Sass xaritalarimiz va o'zgaruvchilarimizni qanday o'zgartirish haqida qo'shimcha ma'lumot va misollar uchun Grid hujjatlarining Sass bo'limiga qarang .

Media so'rovlari

Bootstrap birinchi navbatda mobil bo'lish uchun ishlab chiqilganligi sababli, biz maketlarimiz va interfeyslarimiz uchun oqilona to'xtash nuqtalarini yaratish uchun bir nechta media so'rovlaridan foydalanamiz. Ushbu to'xtash nuqtalari asosan ko'rish maydonining minimal kengligiga asoslanadi va bizga ko'rish oynasi o'zgarganda elementlarni kattalashtirishga imkon beradi.

Min-kenglik

Bootstrap birinchi navbatda Sass manba fayllarida bizning joylashuvimiz, tarmoq tizimimiz va komponentlarimiz uchun quyidagi media so'rovlar diapazonlaridan yoki to'xtash nuqtalaridan foydalanadi.

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

Ushbu Sass aralashmalari bizning kompilyatsiya qilingan CSS-da Sass o'zgaruvchilarimizda e'lon qilingan qiymatlardan foydalangan holda tarjima qilinadi. Masalan:

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

Maksimal kenglik

Biz vaqti-vaqti bilan boshqa yo'nalishda (belgilangan ekran o'lchami yoki undan kichikroq ) media so'rovlaridan foydalanamiz:

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

Ushbu aralashmalar e'lon qilingan to'xtash nuqtalarini oladi, ulardan ayiradi .02pxva ularni bizning max-widthqadriyatlarimiz sifatida ishlatadi. Masalan:

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

Yagona uzilish nuqtasi

Bundan tashqari, minimal va maksimal to'xtash nuqtasi kengliklaridan foydalangan holda ekran o'lchamlarining bitta segmentiga mo'ljallangan media so'rovlari va miksinlar mavjud.

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

Masalan, @include media-breakpoint-only(md) { ... }natijaga olib keladi:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

To'xtash nuqtalari o'rtasida

Xuddi shunday, media so'rovlari bir nechta to'xtash nuqtasi kengligini qamrab olishi mumkin:

@include media-breakpoint-between(md, xl) { ... }

Buning natijasida:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }