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

Алар ничек эшлиләр

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

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

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

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

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

Килешү контейнер

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

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

Onsаваплы контейнерлар

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

<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>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Сыек контейнерлар

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

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

Сасс

Aboveгарыда күрсәтелгәнчә, Bootstrap сез теләгән макетларны төзергә ярдәм итәр өчен алдан билгеләнгән контейнер класслары сериясен чыгара. Сез алдан билгеләнгән контейнер классларын Sass картасын үзгәртеп көйли _variables.scssаласыз:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

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

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

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