Контейнерлар
Контейнерлар - 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% киң, ул ,,, һәм .sm
md
lg
xl
xxl
<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 бүлегенә мөрәҗәгать итегез .