Source

Гомуми күзәтү

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

Контейнерлар

Контейнерлар - Bootstrap-ның иң төп элементы һәм безнең челтәр системасын кулланганда кирәк . max-widthAаваплы, тотрыклы киңлектәге контейнердан (аның һәр ноктадагы үзгәрүен аңлата) яки сыеклык киңлеген сайлагыз ( ул 100%һәрвакыт киң).

Контейнерлар оя корса да , күпчелек макетлар ояланган контейнер таләп итми.

<div class="container">
  <!-- Content here -->
</div>

.container-fluidВизпортның бөтен киңлеген үз эченә алган тулы киңлек контейнеры өчен кулланыгыз .

<div class="container-fluid">
  ...
</div>

Onsаваплы өзекләр

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

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

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

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

CSS чыганагыбызны Sass'та язганлыктан, безнең барлык медиа-сорауларны Sass 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) { ... }

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

Без вакыт-вакыт бүтән юнәлештә барган медиа-сорауларны кулланабыз (бирелгән экран зурлыгы яки кечерәк ):

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

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

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

Тагын бер тапкыр, бу медиа сораулары Sass mixins аша да бар:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

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

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Бу медиа сораулары Sass миксиннары аша да бар:

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

Нәкъ шулай ук, массакүләм мәгълүмат чаралары берничә нокта киңлегендә булырга мөмкин:

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

Шул ук экран зурлыгына каршы Sass миксины:

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

Z-индексы

Берничә Bootstrap компонентлары z-indexкулланыла, эчтәлекне тәртипкә китерү өчен өченче күчәрне тәэмин итеп, макетны контрольдә тотарга ярдәм итүче CSS милеге. Без Bootstrap'та килешү буенча z-индекс масштабын кулланабыз, бу навигация, инструментлар һәм поповерлар, модальләр һәм башкалар.

Бу югарырак кыйммәтләр үзенчәлекле саннан башлана, конфликтлардан идеаль рәвештә сакланырлык дәрәҗәдә югары. Безгә катлаулы компонентлар буенча стандартлар җыелмасы кирәк - кораллар, поповерлар, диңгез плиткалары, төшү, модальләр - шуңа күрә без үз-үзебезне тотышта эзлекле була алабыз. 100Без + яки + куллана алмаган сәбәп юк 500.

Без бу индивидуаль кыйммәтләрне үзләштерергә өндәмибез; берсен үзгәртсәгез, сез аларның барысын да үзгәртергә тиеш.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Компонентлар эчендә кабатланган чикләрне эшкәртү өчен (мәсәлән, төймәләр һәм кертү төркемнәрендәге керемнәр), без түбән санлы z-indexкыйммәтләрне кулланабыз 1, 2һәм 3килешү буенча, хәрәкәт итү һәм актив хәлләр өчен. Көтү / фокус / актив булганда, без билгеле бер элементны алгы планга чыгарабыз, z-indexаларның кыйммәтлеген кардәш элементлар өстендә күрсәтү.