Аеру пунктлары

Breakpoints - көйләнә торган киңлекләр, бу сезнең Bootstrap'тагы җайланма яки күренеш зурлыклары аша сезнең җаваплы урнашуыгызны билгели.

Бу биттә

Төп төшенчәләр

Аеру нокталары - җаваплы дизайнның төп блоклары. Сезнең макетыгызны билгеле бер күренеш яки җайланма зурлыгына яраклаштырып була.
CSS архитектурасы өчен медиа-сорау кулланыгыз. Медиа соравы - CSS үзенчәлеге, бу сезгә браузер һәм операцион система параметрлары нигезендә стильләрне шартлы рәвештә кулланырга мөмкинлек бирә. Без еш кына min-widthмассакүләм мәгълүмат чараларында кулланабыз.
Беренчедән, мобиль, җаваплы дизайн. Bootstrap's CSS иң кечкенә стильдә макетны эшләтеп җибәрү өчен, минималь стильләрне куллануны максат итеп куя, аннары зуррак җайланмалар өчен бу дизайнны көйләү өчен стиль катламнары. Бу сезнең CSS-ны оптимальләштерә, күрсәтү вакытын яхшырта, килүчеләр өчен зур тәҗрибә бирә.

Мөмкин булган өзекләр

Bootstrap алты килешү ноктасын үз эченә ала, кайвакыт челтәр дәрәҗәләре дип атала, җаваплы төзү өчен. Әгәр дә сез безнең Sass файлларын куллансагыз, бу өзекләр көйләнергә мөмкин.

Breakәр сүзнең	Класс инфикс	Ensionsлчәмнәре
X-Кече	Беркем дә юк	<576px
Кечкенә	`sm`	≥576px
Урта	`md`	68768px
Зур	`lg`	≥992px
Өстәмә зур	`xl`	001200px
Өстәмә зур	`xxl`	001400px

Eachәрбер нокта контейнерларны уңайлы тоту өчен сайланган, аларның киңлеге 12 тапкыр арткан. Breakpoints шулай ук гомуми җайланма зурлыкларының һәм күренеш үлчәмнәренең бер өлеше булып тора - алар һәрбер куллану очракларын яки җайланмаларны махсус максат итмиләр. Киресенчә, диапазоннар теләсә нинди җайланма өчен ныклы һәм эзлекле нигез бирә.

Бу өзекләр Sass аша көйләнә - сез аларны _variables.scssстиль таблицасында Sass картасында таба аласыз.

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

Безнең Sass карталарын һәм үзгәрүчәннәрне ничек үзгәртү турында күбрәк мәгълүмат һәм мисаллар өчен , Челтәр документларының Sass бүлегенә мөрәҗәгать итегез .

Медиа сораулары

Bootstrap башта мобиль булу өчен эшләнгәнгә, без үзебезнең макетлар һәм интерфейслар өчен акыллы нокталар булдыру өчен берничә медиа соравын кулланабыз. Бу өзекләр күбесенчә минималь күренеш киңлекләренә нигезләнгән һәм күренеш портлары үзгәргәндә элементларны киңәйтергә мөмкинлек бирә.

Мин-киңлек

Bootstrap беренче чиратта безнең чыганакта челтәр медиа системасы соравы диапазоннарын куллана.

// 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кыйммәтләр итеп кулланалар. Мәсәлән:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Нигә .02px чыгарырга? Браузерлар хәзерге вакытта контекст сорауларын хупламыйлар , шуңа күрә без югары төгәллек белән кыйммәтләр кулланып, фракциональ киңлекләр белән (мәсәлән, югары dpi җайланмаларында билгеле бер шартларда булырга мөмкин) чикләүләр min-һәм max-префикслар һәм күренеш портлары өстендә эшлибез.

Бердәм нокта

Шулай ук минималь һәм максималь киңлек киңлеген кулланып, экран зурлыгының бер сегментын максат итү өчен медиа соравлары һәм миксиннар бар.

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