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

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

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

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

Ботстрап өч төрле контейнер белән килә:

• .container, max-widthһәрбер җаваплы ноктада
• .container-fluid, бу width: 100%барлык нокталарда
• .container-{breakpoint}, width: 100%күрсәтелгән өзеккә кадәр

Түбәндәге таблицада һәр контейнерның оригиналь белән max-widthчагыштырылуы күрсәтелә ..container.container-fluid

Аларны эштә карагыз һәм аларны безнең Челтәр мисалында чагыштырыгыз .

Барысы да бердә

Безнең демократик .containerкласс - җаваплы, тотрыклы киңлек контейнеры, аның max-widthһәр ноктада үзгәрүе.

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

Сыеклык

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

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

Onsаваплы

Bootstrap v4.4-та җаваплы контейнерлар яңа. Алар сезгә күрсәтелгән ноктага кадәр 100% киң булган классны күрсәтергә рөхсәт итәләр, шуннан соң без max-widthһәрбер югары нокта өчен кулланабыз. Мисал өчен, тукталыш ноктасына җиткәнче .container-smбашлау өчен 100% киң, ул кайда киңәячәк , һәм .smmdlgxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</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

Тагын бер тапкыр, бу медиа сораулары 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кыйммәт белән кардәш элементлар өстендә чикләрен күрсәтү.