Нуқтаҳои шикаста

Консепсияҳои асосӣ

• Нуқтаҳои шикаста блокҳои сохтмонии тарҳрезии ҷавобгӯ мебошанд. Онҳоро истифода баред, то назорат кунед, ки кай тарҳбандии шумо метавонад дар як намуди намоиш ё андозаи дастгоҳ мутобиқ карда шавад.

• Дархостҳои медиаро барои меъмории 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) { ... }