Төп эчтәлеккә күчү Документлар навигациясенә күчү
in English

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

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

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

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

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

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

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

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

Өстәмә кечкенә
<576px
Кечкенә
≥576px
Урта
≥768px
Зур
≥992px
X-Зур
≥1200px
XX-Зур
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

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

Безнең демократик .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 бүлегенә мөрәҗәгать итегез .