Контейнерҳо

Чӣ тавр онҳо кор мекунанд

Контейнерҳо унсури асосии тарҳбандии Bootstrap мебошанд ва ҳангоми истифодаи системаи пешфарзии мо талаб карда мешаванд . Контейнерҳо барои нигоҳ доштан, ҷой додан ва (баъзан) марказонидани мундариҷа дар дохили онҳо истифода мешаванд. Гарчанде ки контейнерҳоро лона кардан мумкин аст, аксари тарҳҳо як контейнери лонаро талаб намекунанд.

Bootstrap бо се контейнерҳои гуногун меояд:

• .container, ки max-widthдар ҳар як нуқтаи қатъии ҷавобӣ як муқаррар мекунад
• .container-fluid, ки width: 100%дар хамаи нуктахои танаффус
• .container-{breakpoint}, ки width: 100%то нуқтаи қатъи муайяншуда

Ҷадвали дар поён овардашуда нишон медиҳад, ки чӣ гуна ҳар як контейнер max-widthбо асл .containerва .container-fluidдар ҳар як нуқтаи қатъшавӣ муқоиса мекунад.

Онҳоро дар амал бубинед ва онҳоро дар мисоли Grid муқоиса кунед .

Контейнери пешфарз

Синфи пешфарзии мо .containerяк контейнери ҳассос ва паҳнои собит аст, ки маънои max-widthтағирёбии онро дар ҳар як нуқтаи қатъӣ дорад.

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

Контейнерҳои ҷавобгӯ

Контейнерҳои ҷавобӣ ба шумо имкон медиҳанд, ки синферо, ки 100% васеъ аст, то расидан ба нуқтаи қатъии муқарраршуда муайян кунед, пас аз он мо max-widthбарои ҳар як нуқтаи баландтар s -ро истифода мебарем. Масалан, .container-smто smрасидан ба нуқтаи кандашавӣ 100% васеъ аст, ки он бо 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>

Сасс

Тавре ки дар боло нишон дода шудааст, Bootstrap як қатор синфҳои контейнерии пешакӣ муайяншударо тавлид мекунад, то ба шумо дар сохтани тарҳҳои дилхоҳатон кӯмак расонад. Шумо метавонед ин синфҳои контейнерии пешакӣ муайяншударо тавассути тағир додани харитаи Sass (дар _variables.scss) танзим кунед, ки онҳоро қудрат медиҳад:

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

Илова ба танзими Sass, шумо инчунин метавонед контейнерҳои шахсии худро бо омехтаи Sass мо созед.

// 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-и ҳуҷҷатҳои Grid муроҷиат кунед.